移动端视口配置

werch

已于 2022-09-08 16:51:21 修改

阅读量491

点赞数

文章标签：移动端视口

于 2021-07-07 20:37:26 首次发布

本文链接：https://blog.csdn.net/weixin_42666092/article/details/118556746

版权

1.


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

css:
html,body{
font-size:10px}

其他内容 aa/10 rem

2.根据web或者移动端不同设备尺寸定义不同的html 根font-size从而确定rem

fontsizeset.js

(function (doc, win) {
var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
  };//这里的720位设计稿宽度
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
	<!-- 在html中引入fontsizeset.js文件 -->
    <script src="fontsizeset.js"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }       
        .box{
            width: 3.6rem;
            //这里的3.6 是设计稿720px，设计稿box 宽度360px 
            //实际宽度360/100 =3.6rem
            height:3.6rem;
            background-color: red;
        } 
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

werch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端视口配置

<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">css:html,body{font-size:10px}其他内容 aa/10 rem
复制链接

扫一扫