web,h5开发细节

响应式布局

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样式*/}

上一篇下一篇

猜你喜欢

热点阅读