• 技术文章 >web前端 >css教程

    浅谈css3 device-width和width之间的差异

    青灯夜游青灯夜游2021-02-08 10:35:39转载134
    本篇文章和大家谈谈css媒体查询中device-width与width的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    【推荐教程:CSS视频教程

    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之间的差异的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    专题推荐:css3 device-width width
    上一篇:nginx的css不起作用怎么办 下一篇:ie9不能读取外部css样式怎么办
    第15期线上培训班

    相关文章推荐

    • css3有那些内置函数• 五种常用CSS3网页小效果分享• css3代码和css有不同吗• CSS3实现文字折纸效果的方法(代码示例)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网