【前端】移动端布局（流式、flex、媒体查询、响应式） |
您所在的位置：网站首页 › 移动端适配方案的具体实现原理是什么意思 › 【前端】移动端布局（流式、flex、媒体查询、响应式） |
【前端】移动端布局（流式、flex、媒体查询、响应式）
|
文章目录
移动端布局1. 移动端现状2. viewport(视口)3. 二倍图4.移动端常见布局4.1 流式布局4.2 flex布局4.2.1 flex介绍4.2.2 容器属性4.2.3 项目属性
4.3 移动端适配4.3.1 媒体查询4.3.2 rem4.3.3 less4.3.4 两种移动端适配方案4.3.4.1 方案一 ：rem+媒体查询+less4.3.4.2 方案二：rem+ flexible.js+less
4.4 响应式布局4.4.1 介绍4.4.2 档位划分4.4.3 版心4.4.4 [BootStrap](https://www.bootcss.com/)
移动端布局
1. 移动端现状
内核
当前国产主流手机浏览器，内核都是Webkit 分辨率：手机分辨率，碎片化太多
Android：480x800, 480x854, 540x960, 720x1280，1080x1920 等iPhone：640x960, 640x1136, 750x1334, 1242x2208 等2K、4K等高分辨率
在开发过程中，Google chrome是主要模拟手机的手段之一，步骤： 鼠标右键 检查 或 F12 控制器界面方向选择 手机模式选择 手机类型及尺寸；调节适当的显示比例；点右键 查看 页面元素；
定义： 视口：浏览器（PC、移动端）显示页面内容的屏幕区域；不同的屏幕的大小，我们看到的区域也是不同的； PC端的页面直接放入手机屏显示，不友好，可以用viewport来解决 HTML宽度默认为980px，不是很合适； 各手机型号尺寸： 设备尺寸（英寸）开发尺寸（px）物理像素比（dpr）iphone3G3.5320*4801.0iphone4/4s3.5320*4802.0iphone5/5s/5c4.0320*5682.0HTC One M84.5360*6403.0iphone64.7375*6672.0Nexus44.7384*6402.0Nexus5x5.2411*7312.6iphone6 Plus5.5414*7363.0Samsung Galaxy Note45.7480*8533.0Sony Xperia Z Ultra6.4540*9602.0Nexus 7(‘12)7.0600*9601.3iPad Mini7.9768*10241.0那么设置HTML宽度多少为合适呢？设置为屏幕的窗口大小应该正好合适 设置viewport meta标签设置： width=device-width：改变HTML默认的980px 为 屏幕的宽度； user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)； initial-scale：初始化缩放比例；1.0：不缩放； maximum-scale：用户对页面的最大缩放比例；值：比例 minimum-scale：用户对页面的最小缩放比例；值：比例 3. 二倍图物理像素点 指计算机显示设备中的最小单位，即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光 点。每个点可以发一个颜色，就是我们看到的画面。早期的屏幕，物理像素点都比较大，随着技术的进步，物理像素点会被做的越来越小。屏幕分辨率 由物理像素点的个数来衡量，表示屏幕水平和垂直方向的物理像素点的个数。例如：iPhone3和iPhone4是同一个屏幕尺寸下，比较分辨率：
Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里；从而达到更高的分辨率，并提高屏幕显示的细腻程度。
图片分辨率 假设：有200*200分辨率的图片，展示在宽度分别是320（iphone3）、640(iphone4)分辨率的手机上，展示 的效果如下： 可以看出，不同的屏幕下，显示的图片大小是不一样的；物理像素点的宽度大小为1：0.5，物理像素点的数量：320（1 x 200=200长度）、640(0.5 x 400=200长度；都设为是200长度，才能保证显示的大小一样，这时320的屏幕是200像素点，而640的屏幕是400个像素点。 在移动端，我们可以通过设置CSS样式宽高200px后，会自动保证每个屏幕显示元素大小一样，它会自动算出不同屏幕下，背后需要提供物理像素点需要多少个。 二倍图 像针对640分辨率手机屏（iPhone4），要求设计给400*400图，对应我们CSS设置200px,有二倍的关系： 命名： [email protected]：二倍图[email protected]：三倍图 4.移动端常见布局了解常见布局不同，针对业务需求选择不同的方案；实际开发过程中，都是混合使用，没有哪一种是绝对的单独使用。 常见布局包括以下几种方式： 单独制作移动端页面 流式布局 (百分比布局)flex弹性布局 (强列推荐)less+rem+媒体查询布局混合布局 响应式页面兼容移动端 媒体查询bootstrap比较： 单独制作：流式、flex、rem布局、专门针对各种手机屏幕进行开发。例如：淘宝、京东、苏宁手机端都是单独制作的响应式：可兼容PC 移动端，一个页面多个端适配显示；制作起来要考虑到兼容性的样式。例如：三星电子官网www.samsung.com/cn/ 就是响应式布局 4.1 流式布局看下面代码，左右两部分以百分比来定义宽度，这样无论屏幕如何变化都可以保证效果 Document *{margin: 0;padding: 0;} .op{ width: 100%; border: 1px solid red; overflow: hidden; } .op>div{ float: left; } .left{ width: 40%; height: 200px; background: blue; } .right{ width: 60%; height: 200px; background: pink; } 左 右 4.2 flex布局参考自Flex 布局教程：语法篇 4.2.1 flex介绍布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 传统布局与flex布局比较： 传统布局： 兼容性好、布局繁琐、浮动（清除浮动）有局限性不能在移动端很好的布局flex布局： 操作方便，布局极其简单，移动端使用比较广泛PC端浏览器支持情况比较差如果是PC端页面布局，采用传统方式；如果是移动端或者是不考虑兼容的PC端则采用flex布局 flex布局特点： 任何一个容器标签都可以指定使用 flex 布局。当为父标签设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素，flex通过行和列的思路来控制布局；基本概念： 采用 flex 布局的元素，称为 flex 容器（flex container），父级简称"容器"。它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称"项目"。
语法使用： 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; }Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 4.2.2 容器属性容器属性有以下6个 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。元素默认按照确认的主轴方向进行排布。 flex-direction:row | row-reverse | column | column-reverse;它有4个值： 属性值说明row (默认值)水平方向 ，从左到右row-reverse水平方向，从右到左column垂直方向，从上到下column-reverse垂直方向，从下到上flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 flex-wrap:nowrap | warp | wrap-reverse;它有3个值： 属性值说明nowarp(默认值)不换行；子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置warp换行，子项的总宽加起来超过父级宽度，就会换行，第一行在上方warp-reverse换行，子项的总宽加起来超过父级宽度，就会换行，第一行在下方flex-flow属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 flex-flow: || ;justify-content属性 justify-content属性定义了项目在主轴上的对齐方式，类似word里的左对齐，右对齐，居中对齐，分散对齐； justify-content: flex-start | flex-end | center | space-between | space-around;它有5个值： 属性值说明flex-start(默认值)从头部开始 排列，如果主轴是x轴，则从左到右（左对齐）flex-end从尾部开始排列center在主轴居中对齐（如果主轴是x轴 水平居中）space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。space-between两端对齐，项目之间的间隔都相等。
align-items属性 align-items属性是控制子项单行在侧轴（交叉轴，默认是y轴）上的对齐方式，在子项为单项（单行）的时候使用；整体一行元素看成整体，设置在侧轴上的对齐方式。 align-items: flex-start | flex-end | center | baseline | stretch;它有5个值： 属性值说明flex-start交叉轴的起点对齐(如果是y轴 ，从上到下）flex-end交叉轴的终点对齐center交叉轴的中点对齐。stretch(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度。baseline项目的第一行文字的基线对齐。
align-content属性 align-content属性设置项目在侧轴的排列方式 ，只能用于子项出现换行或者多行的情况,如果项目只有一根轴线(一行)，该属性不起作用。 align-content: flex-start | flex-end | center | space-between | space-around | stretch;它有6个值： 属性值说明flex-start从侧轴头部开始排列flex-end从侧轴尾部开始排列center在侧轴中间显示stretch(默认值)项目高度平分容器高度space-between与侧轴两端对齐，轴线之间的间隔平均分布。space-arond每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
项目属性有以下6个： orderflex-growflex-shrinkflex-basisflexalign-selforder属性 flex-grow属性 flex-shrink属性
flex-basis属性 flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 .item { flex: none | [ ? || ] }该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }除了auto，其他5个属性值的含义与align-items属性完全一样。 4.3 移动端适配 4.3.1 媒体查询媒体查询可以感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示。 CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效； 感受屏幕变化，屏幕变化就是宽度的变化，通过预设置，当屏幕到了我已经预设置的变化的范围，就会把我提前设置好的样式进行生效； 语法：CSS样式如下 /* mediatype 查询类型: ----------------- all 所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等。 条件: ---- and 并且 not 不满足 only 仅仅满足 media feature 查询条件: ---------------------- width,min-with,max-width */ @media mediatype and|not|only (media feature) { CSS-Code; }**例子：**如果文档宽度小于 500 像素则修改背景颜色(background-color) /* min-width/max-width：最小界值，最大界值；查询条件包含等于号；*/ @media screen and (max-width:499px) { body { background-color: red; } } 4.3.2 remrem是一个相对单位，类似于em， 不同的是rem的基准是相对于html元素的字体大小，em是父元素字体大小。 rem让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 rem单位，可以控制整个页面所有元素有关PX类（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制； 根(root): 1 rem代表HTML的font-size大小； /* 1.根html 为 10px */ html { font-size: 10px; } /* 2.此时 div 的宽就是 150px */ div { width: 15rem; }rem应用： 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。 @media screen and (min-width: 320px) { html { font-size: 20px; } } @media screen and (min-width: 640px) { html { font-size: 40px; } } /*在屏幕宽度为320px-639px的设备上，div的宽高就都是20px; 在屏幕宽度大与等于640px的设备上，div的宽高就都是40px;*/ div { width:1rem; height:1rem; } 4.3.3 less less : 让你写更少的代码，实现相同的效果；less :是一门 CSS 扩展语言，它扩展了CSS的动态特性。 CSS 预处理语言。常见的CSS预处理器：Sass、Less、Stylus 。Less中文网址：http://lesscss.cn/less安装： sublime安装less和less2Css插件： https://blog.csdn.net/redase/article/details/83998172 vscode安装less插件： 在扩展：商店中搜 Easy Less安装即可测试：写一个.less文件，保存，就会在当前目录生成一个对应的.css文件 less变量 变量是指没有固定的值，可以改变的。我们CSS中的一些颜色和数值等经常使用，可以设置为变量；语法： //@变量名:值; @bg:#333; .box_1 { background-color: @bg; } .box_2 { background-color: @bg; }变量命名规则： 必须有@为前缀不能包含特殊字符~=+、不能以数字开头大小写敏感区分；less嵌套 类似HTML一样写less结构；语法： /* css 写法 */ #header .logo { width: 300px; } /* less 写法 */ #header { .logo { width: 300px; } }交集|伪类|伪元素选择器，语法： /* css写法 */ a:hover{ color:red; } /* less写法 */ a{ &:hover{ color:red; } }less运算 任何数字、颜色或者变量都可以参与运算，Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。 // 数字 width: 200px - 50; // 颜色 background-color: #666 - #222; // 注意：运算符中间左右有个空格隔开运算后的单位选择： 如果两个值之间只有一个值有单位，则运算结果就取该单位对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位更多less的用法可以访问less的文档 http://lesscss.cn/ https://less.bootcss.com/ 4.3.4 两种移动端适配方案 4.3.4.1 方案一 ：rem+媒体查询+less上面已经说明过了 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。 大概步骤就是： 准备各个档位下的rem ：提前准备好各个档位下的HTML 的font-size大小；拿到当前尺寸的1rem代表多少px；计算比例：把页面刚才所有的元素的PX值替换为rem,可通过less来计算。达到目标：那么，屏尺寸变化时，1rem(基础块)也会变化，自然就是等比缩放。 4.3.4.2 方案二：rem+ flexible.js+less和上个方案实现原理一样，都是通过改变1rem(基础块)大小实现页面整体元素改变； filexible.js 手机淘宝团队出的 简洁高效 移动端适配库；和flex布局没有任何关系 github地址：https://github.com/amfe/lib-flexible 不是通过设置CSS媒体查询设置font-size，通过 JS 设置font-size，效果是屏幕变化一点，就有一个rem重新计算； function setRem () { // docEl.clientWidth JS获取当前屏幕的宽度 // 除以10,得到基础块,(将屏幕划分为10块) var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + 'px' }举个例子： 假如拿到屏幕宽度按430px设计的设计稿， 拿到UI设计稿，原稿实现：页面上所有的元素，在设计稿上进行测量，代码实现；（流式、flex）只要是UI给图上有标注，就是写出来；先全部实现出来，一会儿统一替换； 在哪里写？less文件需要把生成的css文件进行引入index.html；设计稿宽度/10 ：1rem = 43px； 统一替换：100px=100/43 rem; 两种方案的对比 相同： 都是对font-size实现控制，1rem（基础块）变化，实现等比效果； 不同： rem+媒体查询+less：通过设置不同的档位下，设置不同的1rem值；效果为阶梯式变化；flexible.js+rem：通过js设置不同的1rem值，效果为连续变化；这个看起来更为连贯，适配任何屏幕。 4.4 响应式布局 4.4.1 介绍响应式布局可以通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕。 响应式布局涉及屏幕宽度变化(媒体查询)和布局知识[传统布局方案(百分比、浮动、清除浮动、定位)] 4.4.2 档位划分媒体查询：档位划分；市场上默认的划分，三个节点、四个档位 w BootStrap Template 你好，世界！条件注释：满足条件，下面代码链接就会发出请求； [if lt IE 9] [endif]布局容器 版心设置：BootStrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。.container：设置不同档位下的版心的宽度； 超小屏（xs : extra small）：手机； 0px Link Button更多内容可以参考：https://v3.bootcss.com/css/#buttons 辅助类样式 ...更多内容可以参考：https://v3.bootcss.com/css/#helper-classes 字体图标 更多内容可以参考：https://v3.bootcss.com/components/#glyphicons Bootstrap栅格系统 栅格系统可以设置子元素在不同档位下的布局； 栅格系统，在各个档位下，控制子元素布局不同；将版心宽度均分为12份； 各个档位下都有预制好的类前缀： 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中，控制不同的档位下，列的子元素占有几份 基本使用： .col-md-6 .col-md-6 1 2 单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份；多个类前缀：分别按照各个档位列划分生效；每个子项：默认左右15px的padding；行（.row） 可以去除父容器左右15px的padding值：.row的左右margin为-15px；列嵌套 可以在已经分好的子元素中内部，继续进行列的划分（共12份），继续在分好的布局内继续划分； 小列 小列 小列 小列列偏移： 划分好的子项进行列的份数偏移，场景：左右布局，居中布局； 1 2 中间盒子栅格系统相关内容可以参考：https://v3.bootcss.com/css/#grid 响应式工具
响应式工具相关内容可以参考：https://v3.bootcss.com/css/#responsive-utilities |
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iUTK1siP-1604640181230)(https://i.loli.net/2020/11/05/Oznr9KpjHYfoLe8.png)]](https://img-blog.csdnimg.cn/img_convert/f041a4bd35fb7621f145d5dd11924d7d.png#pic_center)
【本文地址】