响应式布局，利用媒体查询(@media)让网站适应电脑及移动端设备的办法

2016-12-29 8:57:13 | 作者：admin | 0个评论 | 人浏览

响应式布局，利用媒体查询(@media)让网站适应电脑及移动端设备的办法

以下代码表示判断屏幕宽度小于360px的CSS样式，也就是说相当于手机屏幕。

@media screen and (max-width: 360px) {
    body {
        background-color:#333；
    }
}

以下代码表示判断屏幕宽度大于640px，同时小时1000px的CSS样式，也就是说相当于Pad 屏幕

@media screen and (min-width:640px) and (max-width:1000px){
    body {
        background:#F00
    }
}

以下代码表示判断屏幕宽度大于1000px，也就是说相当于电脑屏幕。

@media screen and (min-width:1000px) {
    body {
        background:#F00
    }
}

综上所述，只要针对访问网站的屏幕媒体屏幕宽度值判断，则相当于手机、PAD、电脑屏幕大小分别调用不同的CSS.实现了响应式的布局。
使网站在不同设备访问的时显示不同的布局效果。当然宽度值也是可以根据自己实际情况调节的。

相关推荐