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

    方案一,淘宝百度方案,

    核心过程:

    1.根字体 = ( 设备横向独立像素值 * 100 (苹果6固定)) / 设计稿宽度
    2.编写样式时:
    直接以rem为单位。
    值为:设计值 / 根字体

    设计稿宽度不变,苹果6的根字体固定100px,所以当rem不变, 物理像素变大,换设备,需要计算根字体。根字体变小

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          html {
            font-size: 100px;
          }
          #demo {
             3.45rem;
            height: 1.5rem;
            margin: 0.15rem;
            background-color: pink;
    
            /* 
                em: 是相对单位 相对父级的字体大小
                rem: 也是相对单位 相对跟元素素的字体大小
            
             */
          }
        </style>
      </head>
      <body>
        <script>
          // 为了适配不同的手机屏幕,需要动态的计算不同的手机,跟字体应该是多少
          // 公式: 当前设备的独立像素*100/设计稿的宽度 ==> 跟字体的大小
          // 下面这行代码拿到的是布局视口, 但是由于设置了理想视口,所以布局视口的宽度就是设备独立像素的宽度
          // console.log(document.documentElement.clientWidth)
          function adapter() {
         //获取当前物理设备像素 
    const w = document.documentElement.clientWidth // 计算当前设备的跟字体应该是多少 const rootFontSize = (w * 100) / 375 // 给根元素赋值,记得要加px单位 document.documentElement.style.fontSize = rootFontSize + 'px' } adapter() // 注意:切换设备,导致设备独立像素发生变化,因为设置了理想视口,所以布局视口也会变化,会触发window.onresize // window.onresize = function() { // adapter() // } window.onresize = adapter </script> <div id="demo"></div> </body> </html>

    方案二,搜狐,唯品会方案

     核心过程:

    1. 根字体 = 设备横向独立像素值 / 10

    2.编写样式时:

    直接以rem为单位。

    值为:设计值 / (设计稿宽度 / 10)

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          html {
            font-size: 100px;
          }
          #demo {
             9.2rem;
            height: 4rem;
            margin: 0.4rem;
            background-color: pink;
    
            /* 
                em: 是相对单位 相对父级的字体大小
                rem: 也是相对单位 相对跟元素素的字体大小
            
             */
          }
        </style>
      </head>
      <body>
        <script>
          // 方式二:
          // 1. 设置跟字体大小: 永远是设备独立像素/10
          // 2. 动态计算设计稿px对应的rem是多少
          function adapter() {
            const w = document.documentElement.clientWidth
            // 计算当前设备的跟字体应该是多少
            const rootFontSize = w / 10
            // 给根元素赋值,记得要加px单位
            document.documentElement.style.fontSize = rootFontSize + 'px'
          }
          adapter()
    
          window.onresize = adapter
        </script>
        <div id="demo"></div>
      </body>
    </html>

    第二种方法,非375设计图,是750设计图,和less一起搞

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
        <style>
          /* * {
            margin: 0;
            padding: 0;
          }
          html {
            font-size: 100px;
          }
          #demo {
             9.2rem;
            height: 4rem;
            margin: 0.4rem;
            background-color: pink; */
    
            /* 
                em: 是相对单位 相对父级的字体大小
                rem: 也是相对单位 相对跟元素素的字体大小
            
             */
          /* } */
        </style>
      </head>
      <body>
        <script>
          // 方式二:
          // 1. 设置跟字体大小: 永远是设备独立像素/10
          // 2. 动态计算设计稿px对应的rem是多少
          function adapter() {
            const w = document.documentElement.clientWidth
            // 计算当前设备的跟字体应该是多少
            const rootFontSize = w / 10
            // 给根元素赋值,记得要加px单位
            document.documentElement.style.fontSize = rootFontSize + 'px'
          }
          adapter()
    
          window.onresize = adapter
        </script>
        <div id="demo"></div>
      </body>
    </html>

    less,  750的设计图

    @font: 750/10rem;
    * {
      margin: 0;
      padding: 0;
    }
    
    #demo {
       690 / @font;
      height: 300 / @font;
      margin: 30 / @font;
      background-color: pink;
    }

     设计稿

  • 相关阅读:
    PATA 1071 Speech Patterns.
    PATA 1027 Colors In Mars
    PATB 1038. 统计同成绩学生(20)
    1036. 跟奥巴马一起编程(15)
    PATA 1036. Boys vs Girls (25)
    PATA 1006. Sign In and Sign Out (25)
    读取web工程目录之外的图片并显示
    DOS命令
    java连接oracle集群
    servlet
  • 原文地址:https://www.cnblogs.com/fsg6/p/13591330.html
Copyright © 2011-2022 走看看