码迷,mamicode.com
首页 > Web开发 > 详细

【逆战】CSS中的响应式布局

时间:2020-03-01 12:47:01      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:运用   网站建设   bsp   div   red   css3   响应式   建设   span   

一、响应式布局:
在小型网站建设中,有运用一套代码代码来适应不同终端分辨率的需求,优点:节约制作时间、节约制作成本、便于维护等优点。
CSS3利用媒体查询(media queries)即可针对不同的媒体类型定义不同的样式,从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。
      1024分辨率以上:PC端
      1024 ~ 768 : pad pro
      768 ~ 450 : pad mini , mobile 横屏
      450分辨率以下: mobile 竖屏
二、media的值以及用法:
    1、media值:
          all:用于所有设备
          print:  用于打印机和打印预览
          screen:用于电脑屏幕,平板电脑,智能手机等。
          speech:应用于屏幕阅读器等发声设备
    2、用法:
        A:在style样式表中:   
    @media media值 and (分辨率宽度+宽度值)
      css样式
    表示在浏览器页面指定宽度内,css的样式
    @media media值 and (分辨率宽度+宽度值) and (分辨率宽度+宽度值)
      css样式
    表示在浏览器页面指定宽度和另一指定宽度内,css的样式
        B:在外部引入css链接内:
     <link rel="stylesheet" href="xxx.css" media="media值 and (分辨率宽度+宽度值)">
     <link rel="stylesheet" href="xxx.css" media="media值 and (分辨率宽度+宽度值) and (分辨率宽度+宽度值)">
    注:将需要改变的写入media下的css中,正常样式表中写不需要改变的css样式,这样便于后期维护和减少代码工作量
三:media使用方法如下:

 1、style样式表中书写方法

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <style>
 5         /* box 盒子大小,默认情况下页面为红色 */
 6         #box{ width:100px; height:100px; background:red;}
 7         /* 当浏览器页面最小大于500px时且页面小于1000px时,页面为蓝色 */
 8         @media all and (min-width:500px) and (max-width:1000px){  
 9         #box{ background:blue;}
10         /* 当浏览器页面最大小于500px时,页面为黄色 */
11         @media all and (max-width:500px){  
12         #box{ background:yellow;}
13     </style>
14 </head>
15 
16 <body>
17     <p>这是一段测试文字</p>
18     <div id="box"></div>
19 </body>
20 </html>
2、外部引入css书写方法:
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4      /* 当浏览器页面最小大于500px时且页面小于1000px时,页面为蓝色 */
 5     <link rel="stylesheet" href="xxx1.css" media="all and (min-width:500px) and (max-width:1000px)">
 6     /* 当浏览器页面最大小于500px时,页面为黄色 */
 7     <link rel="stylesheet" href="xxx2.css" media="all and (max-width-width:500px)">
 8     <style>
 9         #box{ width:100px; height:100px; background:red;}
10     </style>
11 </head>
12 
13 <body>
14     <p>这是一段测试文字</p>
15     <div id="box"></div>
16 </body>
17 </html>

  注:link引入的css为正常书写的css文件,只不过是样式需要变化的css的值

四、适配规则:

  1、先适配手机 -- 过渡到pad -- 过渡到pc (不推荐)
  2、先适配pc  -- 过渡到pad -- 过渡到手机  (推荐)
  3、移动端特殊适配:
    A:@media media值 and (orientation:portion)     针对竖屏
    B:@media media值 and (orientation:landscape)针对横屏

【逆战】CSS中的响应式布局

标签:运用   网站建设   bsp   div   red   css3   响应式   建设   span   

原文地址:https://www.cnblogs.com/karl-kidd/p/12388746.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!