当前位置:首页 > 技术教程>

响应式CSS3: 移动端开发中 max-device-width 与 max-width 的区别

发表日期:2018-10-09 18:29:37文章编辑:池州网站建设浏览次数:1580 标签:    CSS,响应式,分辨率,宽度,PC端,移动端,自适应

翻译自stackoverflow.com,源地址:http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web

 

有同学需要开发web页在iphone/android手机上访问,想问max-device-width 与 max-width 有什么区别,他打算针对不同的屏幕大小加载不同的样式,就像下面这样:

Html代码  收藏代码
  1. @media all and (max-device-width: 400px)  
  2.   
  3. @media all and (max-width: 400px)  

 

这两者有什么不同?

max-width 指的是显示区域的宽度,比如浏览器的显示区域宽度

(max-width is the width of the target display area, e.g. the browser)

max-device-width 指的是设备整个渲染(显示)区域的宽度,比如设备的实际屏幕大小,也就是设备分辨率 

(max-device-width is the width of the device’s entire rendering area, i.e. the actual device screen)

max-height 与 max-device-height  也是同理

更进一步说,max-width在窗口大小改变或横竖屏转换时会发生变化

max-device-width只与设备相关,横竖屏转换或改变尺寸,缩放都不会发生变化(部分android的宽高会互换而IOS不会) 

 

如何你需要调整浏览器大小查看页面的变化,那开发过程中就使用 max-width,尽管在实际的生产环境中用max-device-width更精确

 

要是只关心两者的区别,到这已经足够了,下面是关于两者在实际应用的区别,来自另一篇文章:

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

在CSS的媒体查询中,width与device-width之间的区别总是让人感到迷惑,下面就让我们来阐述一下两者的区别。

 

device- width指的是设备本身的宽度,也就是屏幕的分辨率,比如说你手机的分辨率是1440*900,这表示你的屏幕宽是1440px, 所以device-width是1440px。大部分的手机宽度不到480px,(当然今后的趋势是越来越大)。iphone 4的device-width就只有320px,即便对外宣称有640*960.这要归功于iphone的retina显示方式,也就是用两个像素来表示屏幕上一个CSS像素,IPAD3也是这样的。官方说IPAD3跟前几代一样采用的device-width是768px,它的实际分辨率达到了1536*2048,就是这个原因。

 

尽管device-width在指定特定的设备更有用,相比之下width在创建响应式页面时用途更加广泛。下面的表格是一个例子,

CSS Media Dimensions Device resolution (px) device-width/ device-height (px)
iPhone 320 x 480 320 x 480, in both portrait and landscape mode
iPhone 4 640 x 960 320 x 480, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 5, 5s 640 x 1136 320 x 568, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 6 750 x 1334 375 x 667, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 6 plus 1242 x 2208 414 x 736, in both portrait and landscape mode. device-pixel-ratio is 3
iPad 1 and 2 768 x 1024 768 x 1024, in both portrait and landscape mode
iPad 3 1536 x 2048 768 x 1024, in both portrait and landscape modeCSS pixel density is 2
Samsung Galaxy S I and II 480 x 800 320 x 533, in portrait modeCSS pixel density is 1.5
Samsung Galaxy S III 720 x 1280 360? x 640?, in portrait mode
HTC Evo 3D 540 x 960 360 x 640, portrait modeCSS pixel density is 1.5
Amazon Kindle Fire 1024 x 600 1024 x 600, landscape mode

( 也可以参考:CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices)

需要注意的是,在苹果设备上,device-width指的总是设备处于肖像模式时的宽,不会随设备横竖屏转换变化,就是说不管怎么换,宽都是不会变的,高也一样。

 

下面是一个通过媒体查询区别设备和不同尺寸的例子:

  1. /* #### Mobile Phones Portrait #### */  
  2. @media screen and (max-device-width: 480px) and (orientation: portrait){  
  3. /* some CSS here */  
  4. }  
  5.   
  6. /* #### Mobile Phones Landscape #### */  
  7. @media screen and (max-device-width: 640px) and (orientation: landscape){  
  8. /* some CSS here */  
  9. }  
  10.   
  11. /* #### Mobile Phones Portrait or Landscape #### */  
  12. @media screen and (max-device-width: 640px){  
  13. /* some CSS here */  
  14. }  
  15.   
  16. /* #### iPhone 4+ Portrait or Landscape #### */  
  17. @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){  
  18. /* some CSS here */  
  19. }  
  20.   
  21. /* #### iPhone 5 Portrait or Landscape #### */  
  22. @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){  
  23. /* some CSS here */  
  24. }  
  25.   
  26. /* #### iPhone 6 and 6 plus Portrait or Landscape #### */  
  27. @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){  
  28. /* some CSS here */  
  29. }  
  30.   
  31. /* #### Tablets Portrait or Landscape #### */  
  32. @media screen and (min-device-width: 768px) and (max-device-width: 1024px){  
  33. /* some CSS here */  
  34. }  
  35.   
  36. /* #### Desktops #### */  
  37. @media screen and (min-width: 1024px){  
  38. /* some CSS here */  
  39. }  

 

通过以上方式,我们的CSS媒体查询方案已经很完善了,但为了页面展示跟我们想像的一样,还要增加一个viewport标签: meta tag.

全站导航

其他新闻

灵动标签判断奇数偶数实现不同的效果奇偶数

这篇文章主要为大家详细介绍了帝国CMS灵动标签中用if判断第几条附加特殊样...

日期:2019-06-18

当前栏目下所有的标题分类并给当前标题分类高亮

<?php //判断当前栏目是否有设置标题分类 $tr=$empire->fetch1("select tti...

日期:2019-05-26

帝国CMS错误报告功能启用、防垃圾灌水、统计、增加报告分类

一、错误报告启用 内容模板加 <a href="&#091;!--news.url--]e/public/repo...

日期:2018-11-24

几何元素、大胆铺色、双重曝光,这些新技能你掌握了吗?

不知不觉 2018 年的余额已经只剩下六分之一不知道大家年初定下的计划有没有...

日期:2018-11-01

列表页调取副表字段befrom,writer,newstext

列表模板中要调用副表字段内容需要采用&ldquo;list.var支持程序代码&rdquo;...

日期:2018-10-30

客户案例

池州某信息技术服务公司网站

网站使用的是PC+移动端判断跳转的。主色调为蓝色,突出科技主题,呈现服务宗旨...

日期:2019-06-18

池州某加工生产企业工程公司官方网站

...

日期:2019-05-26

某县生产力促进中心官方网站

...

日期:2019-05-26

广东中山某大型机械工程公司官方网站

这是广东一家大型进出口机械设备制造公司,实力雄厚。网站是响应式的。客户对...

日期:2018-11-06

帝国网站后台登录模板(带动画)

闲来无事,看到一个很漂亮的登录模板,就顺手修改成了帝国CMS7.5的后台登录模板...

日期:2018-11-02