前端基础之-响应式，flex，适配（px、em、rem、%、vm）

时间 2019-11-05

标签前端基础响应 flex 适配 rem 栏目 Flex 繁體版

原文原文链接

响应式-@media

响应式就是一个网站可以兼容多个终端—而不是为每一个终端作一个特定的版本（响应式开发一套界面）；随之而来的就是咱们熟知的自适应，自适应设计指能使网页自适应显示在不一样大小终端设备上新网页设计方式及技术（须要开发多套界面）。

不一样点

自适应设计经过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不一样的页面；响应式设计经过检测视口分辨率，针对不一样客户端在客户端作代码处理，来展示不一样的布局和内容。
自适应对页面作的屏幕适配是在必定范围：好比pc端（>1024）一套适配,平板（768-1024）一套适配，手机端（<768）一套适配;响应式一套页面所有适配。（能够想象：响应式设计要考虑的内容要比自适应设计复杂的多）

共同点

二者都是优化适应互联网中愈来愈分化的视口浏览体验，而出现的为视口提供更好的体验的技术。用技术来使页面适应不一样分辨率的视口的设计。

响应式优缺点和标志

标志

面包屑菜单
改变浏览器宽度会在不一样分辨率下显示不一样的布局

优势：

面对不一样分辨率设备灵活性强
可以快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站
兼容各类设备工做量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
必定程度上改变了网站原有的布局结构，会出现用户混淆的状况

自适应网站优缺点和标志

标志

大多只是适配单个终端的主流N个主流视口（2-3个）
当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向滑动指示器（主要   出如今pc端，移动端决不容许出现这种状况）
整体框架不变，横线布局的板块大多会有所减小

优势

对网站的复杂程度兼容性更大
实施起来代价更低，
代码更高效
测试更容易，运营相对更精准（图片可控性更高）

缺点：

在移动端设计大行其道之下，同一个网站，每每须要为不一样的设备开发不一样的页面，增长开发成本
当需求改变时，可能会改动多套代码。流程繁琐。

响应式引入方式

1.外部引入：javascript

<link href="url" media="screen and (min-width:0px) and (max-width:400px)"></link>

2.内部：css

@media screen and (min-width:0px) and (max-width:400px){
    //style样式
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style>
        /*基本样式*/
        body {
            margin: 0;
            padding: 0;
            background-color: #ddd;
        }
        .side {
            height: 300px;
            background-color: #4eb3b9;
        }
        .main {
            height: 300px;
            background-color: #ff0097;
        }
        /*device-width: >= 1000px*/
         @media screen and (min-width: 1000px) {
            .parent {
                width: 960px;
                margin: 0 auto;
            }
            .side {
                width: 300px;
                height: 300px;
                background-color: #4eb3b9;
                float: left;
            }
            .main {
                width: 650px;
                height: 300px;
                margin-left: 10px;
                background-color: #ff0097;
                float: left;
            }
         }
        /*device-width:400px-1000px*/
        @media screen and (min-width: 400px) and (max-width: 1000px) {
            .parent {
                display: flex;
            }
            .side {
                width: 300px;
            }
            .main {
                flex: 1;
                margin-left: 10px;
            }
        }
        /*device-width: <= 400px*/
        @media screen and (max-width: 400px) {
            .parent {
                display: flex;
                flex-flow: column wrap;
            }
            .side {
                flex: 1;
                margin-bottom: 10px;
            }
            .main {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="side"></div>
        <div class="main"></div>
    </div>
</body>
</html>

flex弹性盒模型布局

1、html

flex-wrap: nowrap (不换行，主轴方向空间不足默认压缩伸缩项目)
flex-wrap: wrap (换行，主轴方向空间不足换行)


flex-direction : (设置主轴的排列方向，规定了flex-start 和 flex-end的位置)
    row -- 行模式
    column  -- 列模式

2、沿主轴或者侧轴排列伸缩项目
justify-contentjava

- 控制伸缩项目在伸缩容器中，主轴(main)的排列方式。

align-itemscss3

- 控制伸缩项目在伸缩容器中，侧轴(cross)的排列方式。

align-content:web

- 控制伸缩项目，在在伸缩容器中，侧轴(cross)的排列方式

前提条件：
    1.必须有两行或者以上。

    2.flex-wrap: wrap
    3.设置伸缩项目，伸缩容器的宽度，致使水平空间不足。

3、设置伸缩项目的排列顺序，沿着侧轴对齐，压缩率等
align-self浏览器

- 伸缩项目本身决定在伸缩容器中 ，侧轴(cross)的排列方式
- 只能设置在  伸缩项目 中。

flex-growapp

- 分配伸缩容器的剩余空间
   - 只能设置在  伸缩项目 中。

order框架

- 设置伸缩项目在 伸缩容器 排列顺序 (flex-direction 决定排列方向)
    - 只能设置在  伸缩项目 中。

flex-shrink: 压缩率正整数 0 不压缩，默认是1.
flex-basis: 伸缩项目初始化的宽度 = widthiphone

适配

想要了解适配，固然少不了跟适配相关的一些基础概念了呢

像素的相关概念

屏幕尺寸、屏幕分辨率、屏幕像素密度

屏幕尺寸：
    指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。
    常见的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等。
               
屏幕分辨率：（iphone6  750*1334）
    指在横纵向上的像素点数，单位是px，1px=1个像素点。通常以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素指的是物理设备的1个像素点）
                
屏幕像素密度/像素密度/屏幕密度：
    屏幕上每英寸能够显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
    屏幕像素密度与屏幕尺寸和屏幕分辨率有关

物理像素,CSS像素

设备像素/物理像素：（分辨率）
     买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，一个点（小方格）为一个物理像素。（它是屏幕能显示的最小粒度）
            
    设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
    每一个像素能够根据操做系统设置本身的颜色和亮度。
                    
    任何设备的物理像素的数量都是固定的 
          
CSS像素：
    CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（肯定）Web页面上的内容。
            
    它是为web开发者创造的，在css或者javascript中使用的一个抽象的层
            
    通常状况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。
    在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。
            
css像素与物理像素的关系
    一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于 屏幕的特性（是不是高密度,即像素比）和用户的缩放行为。
            
    在苹果的视网膜屏幕上，视网膜的像素密度是普通屏幕的两倍，这个元素就跨越了400个设备像素
    若是用户放大，它将跨越更多的设备像素
            
设备独立像素：设备独立像素(也叫密度无关像素)，能够认为是计算机坐标系统中得一个点，
    这个点表明一个能够由程序使用的虚拟像素(好比: css像素)，而后由相关系统转换为物理像素。
                
位图像素：一个位图的像素是栅格图像(如：png, jpg, gif等)最小的数据单元    
    1个位图像素对应于1个物理像素，图片才能获得完美清晰的展现        
            
对于web开发者而言：
    咱们使用的每个css和javascript定义的像素本质上表明的都是css像素，咱们在开发过程当中并不在乎一个css像素到底跨越了多少个设备像素。咱们将这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。

像素比

像素比:它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素  window.devicePixelRatio

视口和浏览器窗口

在普通的桌面端，视口的默认宽度和浏览器窗口的宽度一致。

    在移动端,浏览器厂商面临着一个比较大的问题,他们如何将数以万计甚至能够说是数以亿计的pc端网页完整的
呈如今移动端设备上,而且不会出现横向滚动条?
    若是这个时候,视口的宽度仍是和浏览器窗口的宽度一致?咱们都知道pc端网页通常都为960px或者1024px，
那么要完整的放下它们，咱们移动端浏览器必需要有个容器放下它吧，并且只有有了这个容器咱们才能很好的规定到底我移动端的
浏览器到底能放下多大的页面吧（可能大于960 页可能大于1024）。这个数值最好大于960，并且设备间的这个容器大小是没有
太大差别的    

    并且基于用户体验咱们更关心width

移动端浏览器厂商是否是得作点什么了（这个容器应该由浏览器厂商设置）

在pc端：
        咱们浏览器的视口（初始包含块，视口）是要小于咱们的屏幕的，通常默认状况下是等于
                
    在移动端：
        咱们浏览器的视口（布局视口）是要远大于咱们的屏幕的独立设备像素的
        
    移动端浏览器厂商要实现的目标：
        在小屏幕的移动设备上，尽量的缩小网站来让用户看到网站的全貌
        
    他们作到了，可是问题又来了：
        在小屏幕的移动设备上，若是设备屏幕视口的宽度和浏览器窗口的宽度同样会致使很丑陋的结果，全部的布局都会被压在一块儿。
因此在移动端浏览器上遇到一个没有为移动端作优化的网站，它会尽量的缩小网站来让用户看到网站的全貌。这对用户的体验来讲，是一件很是可怕的事情。若是你想在一个小小的手机屏幕上显示一个为桌面设计的网站，你必须得舍弃一些布局。

layout viewport和visual viewport

layout viewport:
        手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度

        布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
        
        能够经过document.documentElement.clientWidth来获取 
            在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，由于咱们横向的布局都是
        按初始包含块开始填的，在移动端同样，不过咱们这个时候应该叫它布局视口。
        
        
visual viewport:
        视觉视口与设备屏幕同样宽，而且它的css像素的数量会随用户的缩放而改变

        visual viewport的宽度能够经过window.innerWidth 来获取，
                但在Android 2, Oprea mini 和 UC 8中没法正确获取。

理想视口

咱们分析知道：布局视口的默认宽度并非一个理想的宽度，对于咱们移动设备来讲，最理想的状况是
用户刚进入页面时再也不须要缩放。这就是为何苹果和其余效仿苹果的浏览器厂商会引进理想视口！

只有是专门为移动设备开发的网站，他才有理想视口这一说。并且只有当你在页面中加入viewport的meta标签，理想视口才会生效。

<meta name="viewport" content="width=device-width" />
这一行代码告诉咱们，布局视口的宽度应该与理想视口的宽度一致


css传统的单位有：px、%、em，而随着技术的发展，css3增长了一些新的单位rem、vh、vw、vm等，使咱们的web页面能适应各类不一样的终端显示，如今咱们来看看这些单位的区别，这样对后面进行视口之间的适配有直接的帮助
- pixel（像素）是图像的基本采样单位。因此它不是一个肯定的物理量，也不是一个具体的点或者小方块（尽管能够用点和小方块来呈现），而是一个抽象概念,单位面积内的像素，可大可小,是相对于显示器屏幕分辨率而言的.用PX设置字体大小时，比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，若是改变了浏览器的缩放，这时会使用咱们的Web页面布局被打破.
- em相对长度单位。em是相对于父元素的font-size而计算的。若是当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体(16px)尺寸。 这样就会存在一个问题，进行任何元素都要根据其父元大小设置。
- Rem是相对于根元素html字体大小，这样就意味着，咱们只须要在根元素肯定一个参考值。
- %通常来讲是相对于父元素来说
- viewpoint width（vw），视窗宽度，1vw等于视窗宽度的1%。若是浏览器的宽是500px, 1vw为5px(还有vh等)（尽管%和vw在不少地方都很类似 在使用的过程当中仍是要注意 在出现竖向滚动条的时候vw=%+滚动条的宽度）。

viewport适配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title></title>
        <!--
            UI 给你一张设计图    320px   
            320px变成屏幕宽度    
            图片 会失真    
        -->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 200px;
                height: 200px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script type="text/javascript">
        var targetW = 320;
        var width = document.documentElement.clientWidth;    
        var scale = width/targetW;    
        var metaNode = document.querySelector('meta[name = "viewport"]');
        metaNode.setAttribute('content','initial-scale='+scale);    
    </script>
</html>

rem适配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
        <title></title>
        <!--
            为何要适配：
                要实现等比！（若是屏幕是宽度320px,那么元素宽度为160px,占据就是一半，在各个设备上都是同样）
                等比是实质：一个css像素在不一样机型上，所包含是物理像素不一样，实现等比
            默认状况等不等比：
                不加meta标签时是等比的
            加了meta标签后：
                不能等比了  一个css像素所占据的物理像素的个数肯定了
        -->
        <!--
            rem适配的本质：
                rem参照根元素字体
                无论视图多大，在不一样机型上，1rem等于视图的宽度
                因此，根标签的font-size改为布局视口的大小
        -->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 8rem;
                height: 8rem;
                background: burlywood;
            }            
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
    <script type="text/javascript">
//        var width = document.documentElement.clientWidth;        
//        var html = document.querySelector('html');        
//        html.style.fontSize = width + 'px';

        (function(){
            var styleNode = document.createElement('style');        
            var width = document.documentElement.clientWidth;        
            styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';        
            document.head.appendChild(styleNode);
        })();
    </script>
</html>

上下左右居中的几种实现。

通过上面一顿晕头转向的理解，接下来看几个经常使用的居中形式吧（工做中确定常常碰到的）

是否是觉得我又会长篇大论，才不会， 我没这么傻， 来老铁--> [连接描述][3]
https://blog.csdn.net/mars2009/article/details/79683924

Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现

连接描述