移动端屏幕适配

最新推荐文章于 2024-05-06 19:42:56 发布

「已注销」

最新推荐文章于 2024-05-06 19:42:56 发布

阅读量616

点赞数

分类专栏： web前端文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_45395575/article/details/105385734

版权

移动端适配

移动端屏幕适配的作用是使页面在大小不一的移动端设配上都能正常的显示页面内容。
在编写移动端代码是需要在HTML页面head标签中添加以下代码

<head>
	<meta name="viewport" content="width=device-width, 
	initial-scale=1, maximum-scale=1, minimum-scale=1,
	 user-scalable=no">
</head>

移动端适配原理

相对单位rem，1rem等于根元素html的font-size。所以我们可以根据屏幕宽度的改变去改变根元素html的font-size。这样rem就会随着屏幕宽度的改变而改变。

设置系数——方便将px转换为rem

假如我们在屏幕宽度为750px的设计稿上，让1rem=750px(也就是设置html的font-size为750px)是可以的，但是会出现一些问题。
我们需要设置和计算元素的相对高度，height=100px(在750px设计稿下量出的高度) / 750px rem。计算所得出的相对高度就是我们需要的高度。但是这里有一个问题height=100px/750px=0.133333333…rem，所得出的相对高度大多有无线小数（因为设计稿中其他元素的高度大多小于屏幕的宽度）而且结果很难计算。
所以我们要解决这个问题需要一个系数来降低html的font-size的大小。如何设置一个系数使html的font-size变小，如下：
1rem = 750px / 18.75（设置的系数，为了方便计算）= 40px。这样height = 100/40=2.5rem，这样相对高度就会非常好计算且很少有无线小数！
在视口宽度（viewWidth）为750px时，html的font-size等于viewWidth/18.75=40px，这时那个元素的高度为100px/40px=2.5rem。当视口宽度（viewWidth）为375px时，html的font-size等于viewWidth/18.75=20px，这时那个元素的高度为2.5rem=2.5 * 20px = 50px。刚好是viewWidth为750px时的一半，这样就实现了文档中的元素随着视口宽度的改变而改变。

获取屏幕宽度的方法

获取浏览器窗口文档显示区域的宽度，不包括滚动条。

document.documentElement.clientWidth

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端屏幕适配

移动端适配移动端屏幕适配的作用是使页面在大小不一的移动端设配上都能正常的显示页面内容。在编写移动端代码是需要在HTML页面head标签中添加以下代码<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, ...
复制链接

扫一扫