标签：css3 ratio height width 宽度 aspect device
1.device-width
定义：定义输出设备的屏幕可见宽度。
不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。
比如iphone6的device-width*device-height为375*667,而跟他的dpr等无关。
2.width
定义：定义输出设备中的页面可见区域宽度。
输出的是你的网页可见区域的宽高，假设你的网页是移动端网页嵌套在某个webview中，width实际上就是webview的宽高，如果在不同的浏览器中，width和height也有可能不一样，又假如，你的页面用的rem布局，并且对于retina屏来说dpr>1,meta标签中设置了content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover"，你的iphone6上的width大小就为750px了。
我这里用得比较用得多的是device-width和device-height，因为不用考虑横屏的情况
总结：设备宽度(device-width)指的是显示该页面的屏幕宽度，这里指的是屏幕宽度，通常可以使用于移动设备的，因为这样的设备具有更小的显示区域。宽度(width)指的是浏览器窗口的宽度，特定媒体类型的渲染视区，对于桌面的操作系统来说，其实就是当前浏览器的宽度（并且是包括滚动条的）。网页宽度默认等于屏幕宽度（width=device-width）
比如说适配iphoneX,你已经明确知道了iphoneX（375*812）的尺寸就可以用下面语句：
/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
.foriphoneX()
}
又比如最新的三星折叠屏
@media screen and (device-width: 586px) and (device-height: 820px){
html{
font-size: 110px !important;
}
}
总之，device-width在一个设备中是不会变的，他的值跟设备宽度有关，width在不同的布局方案或者不同的容器中展示都有可能不一样，这里我觉得device-width就相当于js的window.screen.width，width相当于js的document.body.clientWidth了。
另外记录一下我这里适配华为折叠屏的情况，由于此时还没真机，我只知道华为展开情况下的分辨率为2200*2480,dpr什么的还不清楚，因此不知道device-width和device-height(我这边不能用width来做查询，原因关系到业务逻辑)，因此选了device-aspect-ratio,
最开始我在我的less中是这样写的
@media (device-aspect-ratio: 55/62) {
/*适配*/
}
然后css中device-aspect-ratio被计算成小数了
@media (device-aspect-ratio: 0.887097) {
/*适配*/
}
device-aspect-ratio是不支持小数的，因此匹配不上
所以查了一下怎么让less不执行55/62的结果，发现将属性用引号包起来，并且前面加上波浪号就可以了，像这样：
@media (device-aspect-ratio: ~"55/62") {
/*适配部分*/
}
问题解决！
不过已经不推荐使用device-aspect-ratio了，这个属性将会被逐废弃,如果找到了更好的解决方案我也会用替代方案。
标签：css3,ratio,height,width,宽度,aspect,device 来源： https://www.cnblogs.com/qdlhj/p/15902380.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。