移动端的适配整理

Posted 2020-11-03 xiaoyingZha

tags:

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

一、移动端适配

　　方法一：viewport自适应屏幕宽度

　　　　　　在html中创建meta标签：页面的宽度等于屏幕的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">

　　方法二：框架搭建页面

1. 　　bootstrap　　基于jQuery的响应工具，适用于移动端、PC、Pad等
2. 　　ElementUI（PC端）、MintUI（移动端）　　基于vue组件库开发

二、移动端问题　

　　（1）、1px 边框

　　　　方法一：伪元素 + transform 实现

.scale-1px{
  position: relative;
}
.scale-1px::after{
  content: ‘‘;
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  border:1px solid red;
  transform: scaleY(0.5);
}

　　　　方法二：view + rem 实现

　　（2）、移动端布局方式

　　　　　　方法一：响应式布局

　　　　　　　　　　流式布局 + 媒体查询

　　　　　　方法二：弹性布局

　　　　　　　　　　flexbox

　　　　　　方法三：rem 布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
   
        <!--移动端的视口配置 + rem的设置 ： 建议使用内联js -->
        <script>
            //设置适口及缩放比例，目的：实现像素1:1还原    
            var ratio = 1 / (window.devicePixelRatio||1);  // window.devicePixelRatio:浏览器的像素比。
            document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+ratio+‘,minimum-scale=‘+ratio+‘,maximum-scale=‘+ratio+‘,user-scalable=no" />‘)
            //设置html字体大小
            var size = document.documentElement.clientWidth/7.5; //以750尺寸计算
            //要设置的html的font-size是100px,即1rem
            document.getElementsByTagName(‘html‘)[0].style.fontSize = size + ‘px‘;
        </script>
    </head>
    <body>
              code...
    </body>
</html>

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

移动端的适配方案

一个简单的 PC端与移动端的适配(通过UA)