web 移动端 适配

Posted M甲壳虫M

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web 移动端 适配相关的知识,希望对你有一定的参考价值。

 

  1. 设置viewport为设备宽度(这里不一定,但目前先这样足矣)

  2. 将viewport分成10rem,并计算出1rem在当前浏览器的像素值,把它赋予html标签的font-size(分成10rem只是为了方便计算而已)

  3. 写CSS代码时,遇到要适配的地方,比如width,margin,padding等,就不要再用px了,改成用rem

JS和Html代码如下:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height">
    <title>甲壳虫的爬坑之路</title>
    
    <script type="text/javascript">
        var cssEl = document.createElement(‘style‘);
        document.documentElement.firstElementChild.appendChild(cssEl);
    
        function setPxPerRem(){
            var dpr = 1;
            //把viewport分成10份的rem,html标签的font-size设置为1rem的大小;
            var pxPerRem = document.documentElement.clientWidth * dpr / 10;
            cssEl.innerHTML = ‘html{font-size:‘ + pxPerRem + ‘px!important;}‘;
        }
        setPxPerRem();
    </script>
</head>
<body>

</body>
</html>

CSS代码做了类似如下的修改:

技术分享图片

以上是关于web 移动端 适配的主要内容,如果未能解决你的问题,请参考以下文章

产品经理学技术:移动Web怎么做屏幕适配

移动适配移动Web怎么做屏幕适配

移动端Web页面适配方案

移动适配移动Web怎么做屏幕适配

web移动端屏幕适配方案

移动端web自适应适配布局解决方案