zoukankan      html  css  js  c++  java
  • 移动端等比/适配问题

    一、等比问题

      问题:设置了meta标签的前提下,设计师以iphone5SE(640px*1136px)为基准原型设计了稿子,其中的一个div的尺寸为320px*40px,即是该div的宽度占布局视口宽度的1/2(0.5);如果该网页在iphone6S(750px*1334px)上预览,该div的宽度占布局视口的32/75(0.427);如何使得该div在不同的设备上显示出来的时候都是占布局视口的1/2(等比)呢?因此,需要使用适配的手段使得div始终占布局视口的1/2,从而实现等比。

    、适配概念

      实现不同的页面在不同的页面上进行等比显示。

    、rem适配

      原理:改变了一个元素在不同设备上占据的css像素的个数。

      优点:使用了完美视口。

      缺点:px值到rem的转换复杂。

      关键代码:

     1 <!DOCTYPE html>
     2 <html style="font-size:30px;">
     3   <head>
     4     <meta charset="utf-8">
     5     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
     6     <title>rem适配</title>
     7     <style media="screen">
     8       *{
     9         margin: 0;
    10         padding: 0;
    11       }
    12       #div1{
    13                 width: 8rem;
    14                 height: 2rem;
    15         background: blue;
    16       }
    17     </style>
    18   </head>
    19   <body>
    20     <div id="div1"></div>
    21         <script>
    22             (function(){
    23                 // 以iphone5SE(640px*1136px)为基准原型设计了稿子,其中的一个div的尺寸为320px*40px
    24                 // iphone5SE 下,font-size为20px,那么该设置div的宽度为多少rem?
    25                 // 公式:div的宽度/font-size/DPR = 320/20/2 = 8rem
    26                 // 推导过程:像素比=物理像素/设备独立像素=物理像素/CSS像素;iphone5SE的DPR为2
    27                 // 所以:2 = 640/Xrem*font-size => x=16,此处的16rem表示的是640px的,那么一半(320px),那就是8rem
    28                 let w = document.documentElement.clientWidth / 16;
    29                 let styleNode = document.createElement('style');
    30                 styleNode.innerHTML = "html{font-size:"+w+"px !important;}";
    31                 document.head.appendChild(styleNode);
    32             })();
    33         </script>
    34   </body>
    35 </html>

    以下两幅图分别在iphone5SE和iphoneX下,蓝色的DIV都是站布局视口宽度的1/2。

      

    、viewport适配

      优点:所量即所写;缺点:没有使用到完美视口;

      目的:把布局视口的宽度设置为和设计图的宽度。

      知识点:该适配方案主要使用的是理想视口宽度和设计稿的宽度进行做文章;获取理想视口宽度的方式:1、screen.width;2、width=device-width。

      设计图的宽度为750px;实际真机为iphone5SE,如何做到把布局视口的宽度设置为和设计图的宽度一致呢?即是320px变成750px,实际上是缩小操作,即是initial-scale的值小于1;比例为:理想视口宽度/设计图宽度=document.documentElement.clientWidth/设计图宽度=320/750=0.4266666

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8">
     5     <!--理想视口-->
     6     <meta name="viewport" content="width=device-width">
     7     <title>viewport适配</title>
     8     <style media="screen">
     9       *{
    10         margin: 0;
    11         padding: 0;
    12       }
    13       #div1{
    14                 width: 320px;
    15                 height: 50px;
    16         background: blue;
    17       }
    18     </style>
    19   </head>
    20   <body>
    21     <div id="div1"></div>
    22         <script>
    23             (function(){
    24                 // 获取理想视口的宽度
    25                 let clientWidth = document.documentElement.clientWidth;
    26                 // 设计稿的宽度为750px
    27                 let targetW = 750;
    28                 let scale = clientWidth / targetW;
    29                 let metaDom = document.querySelector("meta[name='viewport']");
    30                 // 设置initial-scale
    31                 metaDom.content = "initial-scale="+ scale + ",minimum-scale="+ scale + ",maximum-scale=" + scale
    32             })();
    33         </script>
    34   </body>
    35 </html>

    、百分比适配

    适合比较少元素的情况,比较少用。

  • 相关阅读:
    二进制位运算
    Leetcode 373. Find K Pairs with Smallest Sums
    priority_queue的用法
    Leetcode 110. Balanced Binary Tree
    Leetcode 104. Maximum Depth of Binary Tree
    Leetcode 111. Minimum Depth of Binary Tree
    Leetcode 64. Minimum Path Sum
    Leetcode 63. Unique Paths II
    经典的递归练习
    案例:java中的基本排序
  • 原文地址:https://www.cnblogs.com/llcdxh/p/9537274.html
Copyright © 2011-2022 走看看