2016-07-02 17:50:24  浏览:524

css min-device-width min-width

在网页自适应设计中,max-device-width和max-width是不可缺少的两大CSS属性,但是可能大家在使用的选择上没有太多讲究,认为用其中一个即可。确实,如果没有特定要求,用任何一个都没有什么问题,不过如果你对此两个属性有了充分的认识之后,你或许把网页的自适应设计得更为极致一些。

max-device-width和max-width的区别

max-device-width和max-width是有区别的,表现在如下几个方面:

1、max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。

2、max-width是目标显示区域的宽度,例如,浏览器宽度。

3、如果使用max-device-width,那么在PC浏览器上浏览网页时,缩小或放大浏览器时是不执行CSS的,因为“PC设备”没有变化。但如果使用max-width,缩小或放大浏览器时是执行CSS的,因为“显示区域”即浏览器大小发生了变化。

4、如果使用max-device-width,那么当手机由竖变横时,CSS是不执行的,因为“手机宽度”并没有变化。如果使用max-width,那么当手机由竖变横时,CSS是执行的,因为“显示区域”发生了变化。

5、通常,面向“移动设备”用户使用max-device-width;面向“PC设备”用户使用max-width。

通过这样解释,你应该对max-device-width和max-width的区别和使用有所了解了吧。

看看下面的写法

/* #### 移动设备 #### */
@media screen and (max-device-width: 480px){
/* CSS 代码 */
}
/* #### PC #### */
@media screen and (max-width: 1024px){
/* CSS 代码 */
}

min-device-width和min-width的区别,跟max-device-width和max-width的区别是一样的。

今天在调试小米手机显示问题上折腾了半天,即使在顶部写了<meta name="viewport" content="width=device-width,user-scalable=no">

@media only screen and (min-device-width:901px){

#content{width:900px;margin: 0 auto;}

}

这里还是会强制把content设置为900宽度,

最后两种选择,一是去掉宽度限制,2是改min-device-width为min-width

 

 

返回首页