移动端布局

移动端H5的适配

在这里插入图片描述

1.为什么要适配

a) 为了适应各种移动端设备，完美呈现应有的布局效果

b) 各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放

现在主流的开发思路

PC端和移动端分开开发( 分开开发也是要写两套代码)
如果想在既能适应PC、又能适应移动端响应式开发（麻烦写好多套css ）

2.概念知识

2.1 屏幕尺寸
- 屏幕对角线的长度，单位是英寸。
- 1英寸=2.54厘米，6*2.54 = 15.24厘米
2.2 屏幕分辨率
- 像素：像素是由图像的小方格组成，小方格都有一个明确的位置和倍分配的色彩值。
- 在横纵方向上的像素点，单位是px，1px=1个像素点（这里的1像素指的是物理设备的1个像素点） pixel
- 屏幕分辨率越高，显示效果越精细。（分辨率指的像素点的个数）
- iPhoe 6的分辨率是1334*750像素，一般是纵向像素*横向像素来表示一个手机的分辨率
- 1080P(P指的是逐行扫描)、2K、4K
2.3 像素密度
- 屏幕分辨率与尺寸构成了像素密度。
- 屏幕上每英寸可以显示的像素点数量，单位是ppi（pixels per inch的缩写） 2.54厘米能显示多少个像素点 600
- 屏幕像素密度与屏幕分辨率和屏幕尺寸有关，像素密度越高，屏幕能够以越高的密度显示图像。
2.4 css像素
- css像素是为web开发者根据设计图表示web页面上内容大小的抽象单位，主要使用在浏览器上
- px是一个相对单位，由开发者来使用，也称为逻辑像素。（代码概念、逻辑概念）
- 一个标准的显示密度下（普通屏），一个css像素对应着一个设备像素。在页面不缩放的情况下，1px的CSS像素 === 1设备独立像素
- 页面放大200%时，页面的设备独立像素依旧不变，放大的是CSS像素。但是此时CSS像素与设备独立像素的关系变化了，1px === 4独立像素（宽x2，高x2），经过计算机计算，内部原本设定 1px ，变成 2px
2.5 设备像素/物理像素
1. 显示器的最小物理单位（对于一个显示器来说是固定的）
2. 以手机屏幕为例，屏幕上的真实像素
3. 设备出厂时候的一个宽高（device pixels）
2.6 Css像素与物理像素的关系
- div {width: 100px;} 表示占据了100个像素，在普通屏幕，pc端所有的屏幕都是普通屏幕，100px
- 100个像素占据多少个物理像素，取决于屏幕的特性（是否高密度，像素比）和用户的缩放行为
- iPhone 6的Retina HD 高清视网膜显示屏中，因为视网膜的像素密度是普通屏幕的2倍，所以这个div就占了200个设备像素，如果用户放大，它将占据更多的设备像素。如 iPhone 6 plus ，就会占300个像素。
- 在正常情况下，普通屏幕中，假设 ppi 为 100，他的ppi 2 * 100 ，每英寸有 200个像素点。
2.7 设备独立像素
- 密度无关像素，可以认为是计算机坐标系中的一个点，这个点代表一个由程序员使用的虚拟像素（Css设置的像素），然后由相关设备转换成物理像素，去显示对应的大小。
- 设备独立像素是一个总体概念，包括了Css像素。
- 对于开发者来说，并不在意一个Css像素到底跨越了多少个设备像素，因为Css和Js定义的像素本质上代表的都是Css像素，如何显示对应的大小依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。
- 开发的时候，你不需要去关心，你写的代码，在屏幕设备上到底占用了多少像素，浏览器会经过计算屏幕密度和缩放。
- 通过 window.screen.width/ window.screen.height 查看 375
2.8 像素比(dpr)
- devicePixelRatio指的是物理像素和设备独立像素的比即1独立像素由多少物理像素渲染。
- window.devicePixelRatio可查看
- 设备像素比 devicePixelRatio = 物理像素/独立像素
2.9 位图像素
- 一个位图像素是栅格图像（png、jpg、gif等）最小的数据单元，至少1个位图像素对应1个物理像素，图片才能得到完美清晰的展示。
- 在Retina屏幕下，会出现位图像素点不够的情况，导致图片模糊的情况。
- 对于dpr = 2的屏幕，一个位图像素对应4个物理像素，由于单个位图像素不可以再进一步分割，所以就进去色，导致图片模糊。
- 如200*300的img标签，需要提供400*600的图片，在Retina屏幕下，位图像素就可以和物理像素形成1:1的比例。
2.10 1像素问题

因为不同设备具有不同的dpr + 所代表的设备像素不同, 所以在有些设备上看到的粗,有些设备看到的细,如何解决一像素边框问题,

方法一

通过媒体查询，查询设备的宽尺寸大小范围，根据不同的尺寸大小进行变化

 .box{
   
   
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        @media screen and (min-width: 0) and (max-width: 320px){
   
   
            /* 屏幕宽度为 0 -320 之间的 使用以下 css样式 */
            .box{
   
   
                width: 150px;
                background-color: blue;
            }
        }
        @media screen and (min-width: 321px) and (max-width: 375px){
   
   
            /* 屏幕宽度为 321-375 之间的 使用以下 css样式 */
            .box{
   
   
                width: 100px;
                background-color: blueviolet;
            }
        }
        @media screen and (min-width: 376px) and (max-width: 414px){
   
   
            /* 屏幕宽度为 376-414 之间的 使用以下 css样式 */
            .box{
   
   
                width: 50px;
                background-color: chartreuse;
            }
        }

方法二

通过弹性盒子和百分比来自动适应屏幕宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百分比 flex布局</title>
    <style>
         html {
    
    
                max-width: 750px;
                margin: 0 auto;
        }
        *{
    
    
            margin: 0;
            padding: 0;
        }
        ul{
    
    
            list-style: none;
            overflow: hidden;
        }
        ul>li{
    
    
            float: left;
            width: 20%;
            height: 50px;
            background-color: chartreuse;
            border-radius: 50%;
        }
        .warp{
    
    
            display: flex;
        }
        .warp .box {
    
    
            width: 50%;
            height: 100px;
            background-color: red;
        }
        .warp .box:first-child {
    
    
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="warp">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

方法三

通过给html设置字体尺寸rem ，在通过媒体查询改变字体尺寸来调整大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem</title>
    <style>
        html{
    
    
            /* 
            设计图的尺寸 一般都是 750px
            如果 按照  750px来算 ，放到  750px宽的 屏幕中 
            把 html 的字号 设置成 100px
            用rem 取到  屏幕的宽   7.5rem
             */
            font-size: 100px;
        }
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .box{
    
    
            width: 7.5rem;
            height: 1rem;
            background-color: chartreuse;
        }
        /*  如果设备375px宽的屏幕
            设置的还是 7.5rem
            要取到屏幕的宽度375px，就需要进行计算
            求 x 新屏幕 html 标签的 字号 = 375px(新屏幕宽) *  100px(旧屏幕字号) / 750(旧屏幕宽)
            需要把 新屏幕 html 字号设置成 50px 
        */
        @media screen and (min-width: 0) and (max-width: 320px) {
    
    
            /* 屏幕宽度为 0 -320 之间的 使用以下 css样式 */
            html {
    
    
                /* html 标签的 字号 = 320px(新屏幕宽) *  100px(旧屏幕字号) / 750(旧屏幕宽) */
                font-size: 42.666666666666664px;
                }
            }
        @media screen and (min-width: 321px) and (max-width: 375px) {
    
    
            /* 屏幕宽度 321 - 375之间的 */
            html {
    
    
                /* html 标签的 字号 = 375px(新屏幕宽) *  100px(旧屏幕字号) / 750(旧屏幕宽) */
                font-size: 50px;
            }
        }
        @media screen and (min-width: 376px) and (max-width: 414px) {
    
    
            /* 屏幕宽度 376px  -  414px */
            html {
    
    
                /* html 标签的 字号 = 414px(新屏幕宽) *  100px(旧屏幕字号) / 750(旧屏幕宽) */
                font-size: 55.2px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

方法四

通过js计算html字体大小rem,来适应屏幕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过js计算rem</title>
    <style>

    </style>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        .box{
    
    
            width: 7.5rem;
            height: 1rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        function rem(){
    
    
            // 获取html
            const html = document.documentElement;
            // 获取视口大小
            const width = html.getBoundingClientRect().width;
            // 计算fontsize取值,设计图的尺寸 一般都是 750px。
            html.style.fontSize = width / 7.5 +"px";
        }
        rem();
    </script>
</body>
</html>

方法五

通过设计meta来缩放视口大小

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script>
            function fixLayout() {
    
    
                //获取视口大小
                const width = window.screen.width;
                //设计图一般750px，以750为准
                const fixWidth = 750;
                //视口大小除设计图大小，求出缩放比
                const ratio = width / fixWidth;
				//获取meta元素
                let meta = document.querySelector('meta[name=viewport]');

                // 缩放的是视口
                meta.setAttribute(
                    'content',
                    'width=' +
                        fixWidth +
                        ', initial-scale=' +
                        ratio +
                        ', maximum-scale=' +
                        ratio +
                        ', user-scalable=no'
                );
            }

            fixLayout();
            window.addEventListener('resize', fixLayout);
        </script>
        <style>
            * {
    
    
                margin: 0;
                padding: 0;
            }
            .box {
    
    
                width: 750px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

来源：oschina

链接：https://my.oschina.net/u/4375296/blog/4740265

标签

ppi

javascript

移动端H5的适配

1.为什么要适配

2.概念知识

2.1 屏幕尺寸

2.2 屏幕分辨率

2.3 像素密度

2.4 css像素

2.5 设备像素/物理像素

2.6 Css像素与物理像素的关系

2.7 设备独立像素

2.8 像素比(dpr)

2.9 位图像素

2.10 1像素问题