css3媒体查询中device-width和width的区别详解


Posted in HTML / CSS onMarch 27, 2020

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,因为不用考虑横屏的情况

比如说适配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") {
    /*适配部分*/
}

问题解决!

不过MDN上已经不推荐使用device-aspect-ratio了,这个属性将会被逐废弃,如果找到了更好的解决方案我也会用替代方案。

到此这篇关于css3媒体查询中device-width和width的区别详解的文章就介绍到这了,更多相关css3 device-width width内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
玩转CSS3色彩
Jan 16 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 #HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
You might like
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php解析url的三个示例
2014/01/20 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
vue实现文件上传功能
2018/08/13 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python端口扫描系统实现方法
2014/11/19 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python中强大的format函数实例详解
2018/12/05 Python
Python中extend和append的区别讲解
2019/01/24 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python自动下载图片的方法示例
2020/03/25 Python
python实现在线翻译
2020/06/18 Python
python openssl模块安装及用法
2020/12/06 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
学生就业推荐信
2013/11/13 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
大型演出策划方案
2014/05/28 职场文书
迟到检讨书
2015/01/26 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
Python打包为exe详细教程
2021/05/18 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python