PC端完美兼容各种分辨率的简便方法

2024-06-04 09:58:01

PC端完美兼容各种分辨率的简便方法

小程序、前端交流群：609690978

PS：此方法需使用到less或者scss的@变量来支持

以设计图 1920 宽度为例：
css中存在一种叫vw的单位，是针对浏览器宽度为基础的百分比单位，与%的区别在于，子元素%是相对于父级元素的宽度来计算的，而vw则是针对浏览器的宽度来计算的。打个比方，浏览器宽度为1920px，父级元素宽度为100px，子元素宽度写50%则是50px；而子元素如果写50vw，则其宽度则为浏览器宽度的50%即960px；

弄清楚这点之后，我们可以计算得出：
100vw = 1920px;
1vw = 19.2px
1px = 1 / 19.2vw;

由此，我们可以设置变量 @1px : 1 / 19.2vw;

如此一来，在写样式的时候就可以使用到@1px进行计算，如图：

这样如果浏览器大小发生变化，对应的vw值也会改变，自然vw计算的px也会发生改变，就达到了我们兼容各种浏览器的目的；
但是，这个方法美中不足的是，当浏览器宽度逐渐变小时，margin padding等值也会越来越小，而字体最小是12px，所以大概在800px左右的时候元素会挤在一块，虽然我们现在不必做800分辨率的PC兼容，一般最小兼容到1200，但是为了严谨，我们还是用媒体查询兼容一下1200以下分辨率的

当然，也不是说按1200设计图的元素属性值重写一遍

重点

1200 / 1920 = 0.625
我们知道了两者的比例，这时候再设置一个变量，也可以叫常量，因为这时候我们要设置一个固定的值

因为按1920设计图来的，所以，我们设置1200下的每1px为1920的0.625px；

@1200-1px : 0.625px

这时候写
@media screen and(max-width:1201){
复制以上css代码，并把@1px全局替换为@1200-1px;
}
如图：

至此，大功告成

PS：此法为本人原创，若转载请标注转载地址，否则本人将保留追究转载人法律责任的权利。

小程序、前端交流群：609690978

PC端完美兼容各种分辨率的简便方法相关推荐

【Airtest】Airtest中swipe方法兼容不同分辨率的解决方法
[Airtest]Airtest中swipe方法兼容不同分辨率的解决方法参考文章: (1)[Airtest]Airtest中swipe方法兼容不同分辨率的解决方法 (2)https://www.cn ...
移动端和pc端浏览器兼容问题及处理
一.关于移动端兼容性目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有终端. ...
移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...
pc显示器分辨率前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结
最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足.因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动 ...
PC端页面自适应不同分辨率的方法
以1920* 1080的设计稿为例,实现PC端不同分辨率适配 <script TYPE="text/javascript"> var docEl = document. ...
Vue/Nuxt框架开发的PC端网站兼容平板设备的
大家做项目的时候有没有遇到过一些不符合常理的开发需求,例如:开发的时候PC端和H5是两套站点,一般H5站点会适配平板设备,但是如果需要改成PC端适配平板呢:前期开发PC端没有考虑到PC端会有需要兼容平 ...
js判断移动端，pc端，安卓，苹果浏览器的方法
js 判断安卓或者ios 之indexOf方式(一) //判断访问终端 var browser={versions:function(){var u = navigator.userAgent, ap ...
danmu.js pc端弹幕兼容ie9
关于danmu.js兼容ie9,其实是setTimeout()定时器不兼容的问题,其中有一段代码setTimeout(me.checkRow(me), 0)是这样的,这里如果要兼容ie9,需要将这个段 ...
PC端网站兼容meta设置
<meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...

最新文章

热门文章