如何写自适应分辨率的网页

Posted 2023-03-14

参考技术A 自适应的网页有两种写法：

方式一：用媒体查询"@media"，这种写法好处是可以对不同分辨率的设备，展示完全不同的UI界面，一个页面不同的设备看的时候，展示内容可以不一样，交互方式可以不一样。不过这个不方便用在复杂的地方，而且不同的分辨率都需要对应的重新写样式，同一个页面集合太多的这种写法，最好是分开写两套，降低耦合性。但是这种写法费力不讨好，之前有的网站在PC和手机查看到的样式不一致，用了一些这个技术，但是后来很多都是检测到不同设备，就跳转到不同的网页上去了。

方式二：等比例缩放，界面的比例不会改变，不论设备的尺寸是什么都完全自适应。缺点是等比缩放，PC页面在手机端展示就会很小！这种写法在写H5的时候比较实用，H5只是针对移动设备，移动设备不论分辨率怎么变，界面尺寸等比缩放的话，其实样式兼容性就解决了。这种写法也可以用在PC端，有时候设计按照1080P设计，用户使用的时候放在小屏幕上看就出现很多样式改变或者被压缩换行，界面适配比较不好做的时候，也可以使用等比缩放。

方式一用的不是很多，有兴趣的可以自己去看看，我们着重看方式二。

等比缩放最初我是用css的rem来做的，那会儿单纯的写h5,用px的话，手机显示屏分辨率不一样，用px做单位很难适配，用百分比的话，开发的时候真的要疯了，得按照设计图一个单位一个单位去算。后来想到了用css的rem做单位，只要保证根节点(html根元素)的字号不变，之后所有的页面按照rem为单位来写，那么在分辨率改变的时候，动态的调整根节点的字号大小，就可以做到适配。还需要注意的是，需要设置相对尺寸。这个尺寸最好是按照设计图来，这样做出来的东西和设计图才可以1:1还原。

如下：

蓝湖可以设置相对单位比例，设置好就可以直接获取相对单位（假如设计图是1920px*1080px）。

在页面里引入如下js，页面即可等比缩放：

(function (doc, win)

var root = doc.documentElement,

    resizeEvt ='orientationchange' in window ?'orientationchange' :'resize',

    recalc =function ()

var clientWidth = root .clientWidth

      root .style.fontSize =14 * (clientWidth / 1920) +'px'

       // 若页面要求在一定分辨率内不缩放，可以在此处加逻辑处理。



// 如果浏览器不支持addEventListener，则中止

  if (!doc.addEventListener)return

  win.addEventListener(resizeEvt, recalc, false)

doc.addEventListener('DOMContentLoaded', recalc, false)

)(document, window)

小程序和uni-app都是用类似的思路来做的分辨率兼容。小程序的rpx或者uni-app的upx，在编译的时候会对应的转换为相对单位。而且小程序或uni-app按照750rpx作为屏幕宽度，其实相当于root .style.fontSize =1 / (clientWidth / 750) +'px'，始终把屏幕设置为750，再来自适应所有。PC在写的时候，也可以这样写root .style.fontSize =1 / (clientWidth / 1920) +'px'，这样可以看着好看点，不至于rem的数值是很多的小数。