响应式布局

2019-04-16

语法格式1

<link rel="stylesheet" type="text/css"     
        media="screen and (判断条件)" 
        herf="需要调用的样式表文件" />

说明：通过设定屏幕的判断条件，调用对应的css文件。需要为一个页面制作多个css文件。

Media query属性及说明

属性	说明
device-height	设备屏幕高度
device-width	设备屏幕宽度
width	窗口宽度
height	窗口高度
max-device-height	最大设备屏幕高度
max-device-width	最大设备屏幕宽度
max-height	最大窗口高度
max-width	最大窗口宽度
min-device-height	最小设备屏幕高度
min-device-width	最小设备屏幕宽度
min-height	最小窗口高度
min-width	最小窗口宽度
orientation	设备方向，可设置portrait(竖向)或landscape(横向)
device-aspect	设备屏幕长宽比例，以”长/宽”来设置

<link rel="stylesheet" type="text/css" 
      media="screen and (max-width:1366px)" 
      href="css/style1.css" />
<link rel="stylesheet" type="text/css" 
      media="screen and (max-width:480px)" 
      href="css/style2.css" />

注意：使用min-width属性应从小到大排列；使用max-width属性应从大到小排列

语法格式2

@media screen and (判断条件){
     样式设置
   }

说明：可以直接在样式表中以@media screen属性标注判断条件，执行不同的样式设置

同时符合两个条件

  @media screen and (判断条件) and (判断条件) {
     样式设置
  }

两个条件符合其一即可

  @media screen and (判断条件) ,screen and (判断条件) {
     样式设置
  }