页面响应式布局方法

首先清楚两个概念

响应式:根据不同屏幕分辨率，加载不同的样式。一般样式重写

自适应:根据不同的屏幕分辨率，缩放大小，不影响布局。一般采用百分比写

运用 Css3 Media Queries，根据不同的屏幕分辨率，选择应用不同的Css规则：

max-width：若浏览区域的宽度小于400像素，则下方的CSS描述就会立即被套用：

@media screen and (max-width:400px){    
    .class  {   
         background:#ccc;    
     }   
 }

也可以把要套用的描述独立成外部档案：

<link rel="stylesheet" media="screen and (max-width: 400px)" href="mini.css" />

Device Width：若浏览设备的可视范围最大为480px，则下方的CSS描述就会立即被套用：(注：移动手机目前常见最大宽度为480px，如iPhone or Android Phone)：

@media screen and (max-device-width:480px){   
  .class   
  {   
    background:#000;   
  }   
}

针对iPad的Portrait Mode(直立)与Landscape Mode(横躺)两种浏览模式给予不同的css设定档：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

@media all and (min-width: 1200px){ /*大分辨率*/

}
@media all and (min-width: 850px) and (max-width: 1199px){ /*中分辨率 pc小|| pad*/

}
@media all and (min-width: 700px) and (max-width: 849px){ /*pad*/

}
@media all and (min-width: 480px) and (max-width: 699px){ /*高分辨率手机 || 低分辨率平板*/

}

@media all and (max-width: 479px){ /*手机设备*/

}

需求要适应几个什么样的设备就写几套适应的样式

<link rel="stylesheet" type="text/css" media="screen and (min-width:992px)" href="1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:767px) and (max-width:992px)" href="2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="3.css"> <!--宽度大小承接上下级-->

@media all and (max-width:1024px){ .class{} } iPadPro 最大宽度自己写(推荐写法可控性高，可操作程度高)

all 所有媒体

screen 手持设备彩色(tv 电视)

and 关键字并且

not 关键字除了

only 关键字只有

例子：@media all and (max-device-width:768px){}

页面响应式布局方法

猜你喜欢