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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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开发过程中常用函数收藏
2009/12/14 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
详解Django中的form库的使用
2015/07/18 Python
利用Python循环(包括while&for)各种打印九九乘法表的实例
2017/11/06 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
运动会通讯稿200字
2014/02/16 职场文书
客户答谢会活动方案
2014/08/31 职场文书
关键在于落实心得体会
2014/09/03 职场文书
防汛工作情况汇报
2014/10/28 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
mysql 排序失效
2022/05/20 MySQL