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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
div层的移动及性能优化
2010/11/16 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
说出数据连接池的工作机制是什么?
2013/04/19 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
室内设计专业学生的自我评价分享
2013/11/27 职场文书
毕业证丢失证明
2014/01/15 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
观后感的写法
2015/06/19 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang