移动端布局
移动端布局
移动端基础
移动端浏览器现状移动端起步较晚，基本以webkit为主，兼容移动端主流浏览器，处理Webkit内核即可，可以放心使用H5标签和CSS3样式
移动端屏幕现状 屏幕尺寸多样、分辨率多样，碎片化严重作为开发者无需过多关注分辨率，因为我们使用的尺寸单位是px 移动端调试方法 Chrome DevTools的模拟移动端调试搭建本地web服务其，手机和服务器在一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。
视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度
理想视口是指对设备来讲最理想的视口尺寸。在理想视口中，布局视口的大小和屏幕宽度是一致的，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理，使得布局视口的宽度与理想视口的宽度一致
// 以下为最标准的viewport设置 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 12
二倍图
物理像素和物理像素比物理像素指的是屏幕显示的最小颗粒，是物理真实存在的（分辨率）。做开发时候的1px 不一定等于1个物理像素
物理像素比即1个px的能显示的物理像素点的个数
lRetina：一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。
**解决方案：**在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
背景缩放background-size：该属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度; 单位：长度、百分比、cover、contain 12 cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（高度宽度等比拉伸，覆盖完全覆盖区域）contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（高度、宽度等比拉伸，可能存在空白区域）
移动开发选择和技术解决方案
移动端开发选择 单独制作移动端页面（主流） 京东商城淘宝苏宁易购 响应式页面兼容移动端：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配，制作麻烦需要话费大量尽力调兼容性问题 三星手机官网 移动端技术解决方案兼容性问题：只需考虑webkit兼容性问题，可以大胆使用H5和CSS3样式，浏览器的私有前缀我们只需要考虑添加 webkit 即可
移动端公共样式：移动端CSS 初始化推荐使用 normalize.css
保护了有价值的默认值修复了浏览器的bug是模块化的拥有详细的文档CSS3盒子模型 box-sizing
传统模式宽度计算：盒子的宽度 = CSS中设置的width + border +paddingCSS3盒子模型：盒子的宽度= CSS中设置的宽度width里面包含了border和padding/*CSS3盒子模型*/ box-sizing: border-box; /*传统盒子模型*/ box-sizing: content-box; 1234 移动端特殊样式
/*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box; /*点击高亮我们需要清除背景，设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none; /*禁用长按页面时的弹出菜单*/ img,a { -webkit-touch-callout: none; } 123456789
常用移动端页面布局
常用布局 移动端单独制作页面 流式布局（百分比布局）flex弹性布局（推荐）less + rem + 媒体查询布局混合布局 响应式页面布局 媒体查询bootstrap 流式布局流式布局就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
**案例：**京东移动端首页
flex布局 什么是flex布局即flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局，又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。采用 Flex 布局的元素，称为Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称“项目”
父项常见属性 属性说明flex-direction设置主轴方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-content设置侧轴上的子元素的排列方式（多行）align-items设置侧轴上的子元素排列方式（单行）flex-flow复合属性，相当于同时设置了 flex-direction 和 flex-wrap flex-direction在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下
属性值说明row默认值，从左到右row-reverse从右到左column从上到下column-reverse从下到上 justify-content设置元素主轴排列方式
属性值说明flex-start默认值，从头部开始排列flex-end从尾部开始排列center在主轴居中对齐space-around平分剩余空间，每个盒子margin-left和margin-right相等space-between先两边贴边，再平分剩余空间 flex-wrap设置是否换行
属性值描述nowrap默认值，不换行，装不下会缩小子元素宽度放到父盒子中wrap换行 align-items设置侧轴子元素排列方式（单行）
属性值描述flex-start默认值，从头部开始flex-end从尾部开始center居中显示stretch拉伸，不能有高度/宽度 align-content设置侧轴子元素排列方式，并且只能用于出现换行的情况（多行），在单行下是无效的
属性值描述flex-start默认值，从侧轴头部开始排列flex-end从侧轴尾部开始center再侧轴居中显示space-around子项在侧轴平分剩余空间space-between子项在侧轴两头先贴边，再平分剩余空间stretch设置子项元素高度平分父元素高度align-content 和align-items区别：
align-items适用于单行情况下， 只有上对齐、下对齐、居中和拉伸align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值总结：单行找align-items，多行找align-content flex-flow/* flex-direction 和 flex-wrap 属性的复合属性 */ flex-flow:row wrap; 12 子项常见属性 属性描述flex子项占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序） flex属性
分配剩余空间
/* flex 属性定义子项目分配剩余空间，用flex来表示占多少份数 */ .item { flex: 2; /* 默认值 0 */ } 1234 align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
span:nth-child(2) { /* 设置自己在侧轴上的排列方式 */ align-self: flex-end; } 1234 order
数值越小，排列越靠前，默认为0，注意不是z-index
.item { order: 2; } 123
rem布局
rem单位rem即root em，是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是根元素——html元素的字体大小。比如根元素（html）设置font-size=12px; 非根元素设置width: 2rem; 则换成px表示就是24px。使用rem可以很好来控制整个页面的元素大小
媒体查询 什么是媒体查询媒体查询（Media Query）是CSS3新语法。
使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 媒体查询语法规范 用 @media开头 注意@符号mediatype 媒体类型关键字 and not onlymedia feature 媒体特性必须有小括号包含@media mediatype and|not|only (media feature) {/* CSS-Code; */ } 123 mediatype
将不同的终端设备划分成不同的类型，称为媒体类型
值描述all用于所有设备print用于打印机和打印预览screen用于电脑屏幕、平板电脑、智能手机等 关键字关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
值描述and可以将多个媒体特性连接到一起，相当于“且”的意思not排除某个媒体类型，相当于“非”的意思，可以省略all指定某个特定的媒体类型，可以省略 媒体特性每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意它们要加小括号包含
值描述width定义输出设备中页面可见区域的宽度min-width定义输出设备中页面最小可见区域宽度max-width定义输出设备中页面最大可见区域宽度/* 在屏幕上 并且 最大宽度是800px(宽度小于等于800) 时body为粉色，注意时包含800px的 */ @media screen and (max-width: 800px) { body { background-color: pink;} } /* 查询时先会执行上面的，下面的这句话会覆盖它 */ /* 在屏幕上 并且 最大宽度是500px(宽度小于500) 时body为蓝色 */ @media screen and (max-width: 500px) {body { background-color: blue;} } 12345678910111213 媒体查询书写规范
为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，我们通常从小到大来写，这样代码更简洁
rem适配方案让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
两种适配方案less + rem + 媒体查询
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem是2rem*2rem，高宽比例是1比1
⑧320屏幕下，html字体大小为21.33，则 2rem= 42.66px 此时宽和高都是 42.66px，但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 html元素font-size的大小
③或者：页面元素的rem值 = 页面元素值（px） / html元素font-size字体大小
flexible.js
①手机淘宝团队出的简洁高效 移动端适配库，因为里面js做了处理，无需再写各种媒体查询条件，它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
②我们只需确定好当前设备的html元素文字大小就可以了，剩余的，让flexible.js来去算
比如当前设计稿是 750px， 那么我们只需要把 html元素文字大小设置为75px（750px / 10）就可以了，
里面页面元素rem值： 页面元素的px 值 / 75
github地址：https://github.com/amfe/lib-flexible
总结：
因为flexible是默认将屏幕分为10等分，但是当屏幕大于750的时候希望不要再去重置html元素字体了
所以要自己通过媒体查询设置一下，并且要把权重提到最高
响应式布局
响应式布局开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备划分情况如下：
小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器） 响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。父容器版心的尺寸划分如下：
超小屏幕（手机，小于 768px）：设置宽度为 100%小屏幕（平板，大于等于 768px）：设置宽度为 750px中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px也可以根据实际情况需要自定义划分
布局和样式的设置，从而适配不同设备的目的。设备划分情况如下：
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。父容器版心的尺寸划分如下：
超小屏幕（手机，小于 768px）：设置宽度为 100%小屏幕（平板，大于等于 768px）：设置宽度为 750px中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px也可以根据实际情况需要自定义划分
相关知识
移动端
手机移动端快速开发
Html+Css+js实现春节倒计时效果（移动端和PC端）
移动Web实训DAY
一分钟告诉你建行移动端网络学习怎么学
简约排版鲜花植物类移动端店铺首页
基于深度卷积神经网络的移动端花卉识别系统
移动应用开发
电商平台移动端应用开发及维护服务合同.doc
下列哪项属于移动端交易?
网址: 移动端布局 https://m.huajiangbk.com/newsview948636.html
| 上一篇: H5页面适配及微信默认字号问题的 |
下一篇: vue3 + vite4.0 开 |
