max(min)-device-width和max(min)-width的区别

max(min)-device-width和max(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的区别是一样的。

实例分析

下面是两段css代码

代码1：

@media(max-device-width:960px)
{
/* CSS 代码 */
｝
代码2：

@media(max-width:960px)
{
/* CSS 代码 */
｝
现在在PC机上打开网页，用Firefox浏览器，把浏览器缩小到宽度为385px。

使用max-device-width时，网页不会随浏览器缩小而自适应变化。

使用max-width后，网页随浏览器缩小而发生自适应变化。

写这篇文章的目的：

pc端突然有个样式，总宽度给的是百分比，其中有两部分，a部分是百分比宽 b部分是两个指定font-size的icon;结果在pc不同分辨率的情况下出现了样式展示问题

好久没写响应式突然有个响应式的写法感觉写不出来了。哎！辛亏遇到这篇文章啊。现在写写我这边的写法

上面文章总结一下，
@media screen max-device-width表示的是电脑屏幕的宽度；主要针对的是手机端
@media min-width 表示的是浏览器的宽度，我这里理解的是分辨率。使用于pc端响应式

之前都没具体的分析过，现在突然感觉要学习的东西还很多啊。今天突然遇到苹果电脑15寸，屏幕宽度其实只有1024px 但是分辨率有2500多。。。。所以以下是解决方案

@media (min-width: 1024px) and (max-width: 1279px){
  .btn > span:first-child {
    width: 62% !important;
  }
}
@media (min-width: 1280px) and (max-width: 1439px){
  .btn > span:first-child {
    width: 72% !important;
  }
}

@media (min-width: 1440px) and (max-width: 1679px){
  .btn > span:first-child {
    width: 78% !important;
  }
}
@media (min-width: 1680px) and (max-width: 1919px) {
  .btn > span:first-child {
    width: 84% !important;
  }
}
@media (min-width: 1920px) {
  .btn > span:first-child {
    width: 90% !important;
  }
}

转自：http://www.webkaka.com/tutorial/html/2015/082713/