zoukankan      html  css  js  c++  java
  • 移动端的适配整理

    一、移动端适配

     

      方法一: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>
        
  • 相关阅读:
    %u编码
    总结
    windows7 安装PHP7 本地网站搭建
    统计某个端口的链接数
    mysql连结查询
    mysql in
    读书笔记<白帽子讲web安全>
    Web攻防系列教程之文件上传攻防解析(转载)
    攻防:文件上传漏洞的攻击与防御
    weblogic检查项
  • 原文地址:https://www.cnblogs.com/zhaoxiaoying/p/9011611.html
Copyright © 2011-2022 走看看