响应式的设计需要遵守的4个原则和媒介查询语句

1,小屏幕只显示高优先级的内容(切换到小屏幕的时候,显示优先级高的内容)

2,提供清晰和友好的手指操作链接(可点击操作的区块不宜过小)

3,体验的一致性(不同设备上的保持一致性)

4,考虑操作移动设备的习惯(左手握住设备,右手操作)

媒介查询的基本语法:

(1)定义小于600px的窗口所应用的样式

 @media screen and (max-600px){

   .class{

      background:#ccc;

    }

  }

(2)定义小于900px并且大于600px的窗口所应用的样式

 @media screen and (min-600px) and (max-900px){

   .class{

      background:#ccc;

    }

  }

响应式的设计需要遵守的4个原则和媒介查询语句

响应式的设计需要遵守的4个原则和媒介查询语句