响应式布局
2018-07-30 本文已影响0人
曾经也是个少年
响应式布局是根据分辨率不同而改变布局。比如PC,平板,手机他们是一个页面,但是不同设备不同布局。
首先在头部加入:
这上面的代码表示页面禁止缩放。
下面是在CSS中的代码:
@media screen and (min-width:900px) {/*分辨率大于900实行这里面的CSS样式*/}
@media screen and (max-width:900px) (min-width:600px) {/*分辨率在900到600之间,运行这里面的CSS样式*/
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/}