首页 > 其他分享> > 移动Web开发流式布局

移动Web开发流式布局

2021-09-08 20:58:43 作者：互联网

移动Web开发

https://blog.csdn.net/u010358168/article/details/107151859

1.【移动端基础】

—浏览器现状

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2TeIPuBs-1631105641214)(C:\Users\ADMINI~1\AppData\Local\Temp\1631105459543.png)]

—手机屏幕现状

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5R1vK2H-1631105641216)(C:\Users\ADMINI~1\AppData\Local\Temp\1631105502587.png)]

—移动端浏览器内核选择

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vaJmj8m-1631105641219)(C:\Users\ADMINI~1\AppData\Local\Temp\1630728088829.png)]

—移动端的调试方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VyGTES36-1631105641221)(C:\Users\ADMINI~1\AppData\Local\Temp\1630728393817.png)]

—总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GIxsY1ZZ-1631105641226)(C:\Users\ADMINI~1\AppData\Local\Temp\1630728618762.png)]

2.【视口】

1.布局视口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cXONoUFK-1631105641229)(C:\Users\ADMINI~1\AppData\Local\Temp\1630728885630.png)]

2.视觉视口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gsNbu4se-1631105641230)(C:\Users\ADMINI~1\AppData\Local\Temp\1630735004551.png)]

3.理想视口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZvIzj9g8-1631105641231)(C:\Users\ADMINI~1\AppData\Local\Temp\1630735129554.png)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hdaNZkP-1631105641232)(C:\Users\ADMINI~1\AppData\Local\Temp\1630735148158.png)]

4.meta视口标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xnfO6OcS-1631105641234)(C:\Users\ADMINI~1\AppData\Local\Temp\1630739593547.png)]

5.标准的viewport设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2VajMLde-1631105641235)(C:\Users\ADMINI~1\AppData\Local\Temp\1630739692921.png)]

3.【二倍图】

1.物理像素&物理像素比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzartDFR-1631105641235)(C:\Users\ADMINI~1\AppData\Local\Temp\1630762228625.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vGcFNnw7-1631105641236)(C:\Users\ADMINI~1\AppData\Local\Temp\1630762390416.png)]

2.多倍图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-63tZkPzj-1631105641237)(C:\Users\ADMINI~1\AppData\Local\Temp\1630762651458.png)]

3.背景缩放background-size

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMtHmzJ3-1631105641239)(C:\Users\ADMINI~1\AppData\Local\Temp\1630763186829.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jae8z4fj-1631105641240)(C:\Users\ADMINI~1\AppData\Local\Temp\1630763139125.png)]

4.多倍图切图cutterman

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioD1lgGB-1631105641241)(C:\Users\ADMINI~1\AppData\Local\Temp\1630763437182.png)]

4.【移动端开发选择】

1.移动端主流方案

—单独开发移动端

—响应式布局开发移动端

2.移动端技术解决方案

移动端浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s8XYxxgz-1631105641243)(C:\Users\ADMINI~1\AppData\Local\Temp\1630801501927.png)]

CSS初始化 normalize.css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cg2x8c31-1631105641243)(C:\Users\ADMINI~1\AppData\Local\Temp\1630801586318.png)]

CSS3盒子模型 box-sizing

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ruZCDEPF-1631105641245)(C:\Users\ADMINI~1\AppData\Local\Temp\1630801849367.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZRkR7BQ-1631105641246)(C:\Users\ADMINI~1\AppData\Local\Temp\1630801783624.png)]

特殊样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xp9uQtq-1631105641248)(C:\Users\ADMINI~1\AppData\Local\Temp\1630801927518.png)]

5.【移动端常见布局】

1.流式布局（百分比布局）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcBNthQW-1631105641249)(C:\Users\ADMINI~1\AppData\Local\Temp\1630803470301.png)]

案列:京东移动端首页

—初始化样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-It94GYQG-1631105641251)(C:\Users\ADMINI~1\AppData\Local\Temp\1630804459193.png)]

—二倍精灵图做法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPSAiLXK-1631105641252)(C:\Users\ADMINI~1\AppData\Local\Temp\1630828887230.png)]

—图片格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GYrnYWvR-1631105641254)(C:\Users\ADMINI~1\AppData\Local\Temp\1630832871806.png)]

6.【移动端Flex布局】

目标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ML1ACEAq-1631105641255)(C:\Users\ADMINI~1\AppData\Local\Temp\1630835711988.png)]

1.传统布局和flex布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zuZ10fuG-1631105641258)(C:\Users\ADMINI~1\AppData\Local\Temp\1630835918504.png)]

2.布局原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JWREpuNm-1631105641259)(C:\Users\ADMINI~1\AppData\Local\Temp\1630840785595.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tl2EJqyg-1631105641260)(C:\Users\ADMINI~1\AppData\Local\Temp\1630840853432.png)]

3.常见的父项属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLjTt7iH-1631105641262)(C:\Users\ADMINI~1\AppData\Local\Temp\1630843933312.png)]

3.1( flex-direction)设置主轴方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QuCOXjI6-1631105641263)(C:\Users\ADMINI~1\AppData\Local\Temp\1630844099676.png)]

3.2( justify-content)设置主轴上的子元素排列方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w82D8sdX-1631105641264)(C:\Users\ADMINI~1\AppData\Local\Temp\1630849522596.png)]

3.3( flex-wrap)设置子元素是否换行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jf6Z2ps5-1631105641265)(C:\Users\ADMINI~1\AppData\Local\Temp\1630850104830.png)]

3.4（align-items）设置侧轴上的子元素排列方式（单行）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tB8lXYPG-1631105641266)(C:\Users\ADMINI~1\AppData\Local\Temp\1630851273681.png)]

3.5（align-content）设置侧轴上的子元素排列方式（多行）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PtLegWt1-1631105641268)(C:\Users\ADMINI~1\AppData\Local\Temp\1630851687479.png)]

(align-content 和 align-items 区别)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjIlL7GK-1631105641270)(C:\Users\ADMINI~1\AppData\Local\Temp\1630851933738.png)]

3.6 (flex-flow) 复合属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ENaxJM97-1631105641271)(C:\Users\ADMINI~1\AppData\Local\Temp\1630852155693.png)]

4 .常见的子项属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6LNhjrn-1631105641275)(C:\Users\ADMINI~1\AppData\Local\Temp\1630894682213.png)]

4.1 flex属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnG6Fqex-1631105641275)(C:\Users\ADMINI~1\AppData\Local\Temp\1630894718660.png)]

4.2 align-self控制子项自己在侧轴上的排列方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ad7bOo18-1631105641276)(C:\Users\ADMINI~1\AppData\Local\Temp\1630894870222.png)]

4.3 order属性定义项目的排列顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUYIw6aG-1631105641278)(C:\Users\ADMINI~1\AppData\Local\Temp\1630894972224.png)]

7【携程网案列小技巧】

背景线性渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHasC8Ut-1631105641279)(C:\Users\ADMINI~1\AppData\Local\Temp\1630983774944.png)]

8【移动端Rem布局】

思考

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ye2nrs6V-1631105641282)(C:\Users\ADMINI~1\AppData\Local\Temp\1631016248797.png)]

1. (rem单位)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Q4I2sJs-1631105641283)(C:\Users\ADMINI~1\AppData\Local\Temp\1631016817084.png)]

2. (媒体查询)

2.1 什么是媒体查询

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xNQ2qfb-1631105641285)(C:\Users\ADMINI~1\AppData\Local\Temp\1631016969595.png)]

2.2语法规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uo6Xi2Gr-1631105641286)(C:\Users\ADMINI~1\AppData\Local\Temp\1631017065097.png)]

—mediatype查询类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kURdAOkw-1631105641287)(C:\Users\ADMINI~1\AppData\Local\Temp\1631017165181.png)]

—关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1M0903OB-1631105641288)(C:\Users\ADMINI~1\AppData\Local\Temp\1631017216451.png)]

—媒体特性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Ul5UkRx-1631105641290)(C:\Users\ADMINI~1\AppData\Local\Temp\1631017285505.png)]

—根据屏幕大小引入的资源样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8C60tsR-1631105641291)(C:\Users\ADMINI~1\AppData\Local\Temp\1631064224645.png)]

3 .(Less基础)

3.1 维护css的弊端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GTOEFVU4-1631105641292)(C:\Users\ADMINI~1\AppData\Local\Temp\1631064456355.png)]

3.2 Less介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z47K7ZXl-1631105641293)(C:\Users\ADMINI~1\AppData\Local\Temp\1631064712127.png)]

3.3 Less使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Istj7p70-1631105641295)(C:\Users\ADMINI~1\AppData\Local\Temp\1631064810413.png)]

Less变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nFEFv6Xe-1631105641295)(C:\Users\ADMINI~1\AppData\Local\Temp\1631065053840.png)]

Less编译

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjRSUqF6-1631105641297)(C:\Users\ADMINI~1\AppData\Local\Temp\1631065127346.png)]

—编译插件Easy Less

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofoQ3xWQ-1631105641298)(C:\Users\ADMINI~1\AppData\Local\Temp\1631065212431.png)]

Less嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tsbzWBxL-1631105641300)(C:\Users\ADMINI~1\AppData\Local\Temp\1631065680707.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tbLONcfF-1631105641301)(C:\Users\ADMINI~1\AppData\Local\Temp\1631065842308.png)]

Less运算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijIhzw3R-1631105641303)(C:\Users\ADMINI~1\AppData\Local\Temp\1631066271877.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cIzoQayy-1631105641304)(C:\Users\ADMINI~1\AppData\Local\Temp\1631066292887.png)]

4 .Rem适配方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yMIzpvzq-1631105641306)(C:\Users\ADMINI~1\AppData\Local\Temp\1631066536318.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nzpHVJzY-1631105641307)(C:\Users\ADMINI~1\AppData\Local\Temp\1631066560525.png)]

4.1 rem实际开发适配方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vjII3X9m-1631105641309)(C:\Users\ADMINI~1\AppData\Local\Temp\1631066727294.png)]

4.2 rem适配方案技术使用（市场主流）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sWiRjd9I-1631105641310)(C:\Users\ADMINI~1\AppData\Local\Temp\1631067038838.png)]

4.3 rem实际开发适配方案（1）

1.设计稿常见尺寸宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZuXVoKRb-1631105641311)(C:\Users\ADMINI~1\AppData\Local\Temp\1631067188542.png)]

2.动态设置html标签font-size大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SCiK2VX-1631105641312)(C:\Users\ADMINI~1\AppData\Local\Temp\1631067514027.png)]

3.元素大小取值方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZ9BySHu-1631105641313)(C:\Users\ADMINI~1\AppData\Local\Temp\1631071212652.png)]

5.苏宁首页案例制作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6rmJWnk-1631105641318)(C:\Users\ADMINI~1\AppData\Local\Temp\1631075081521.png)]

1.技术选型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hKLC23T2-1631105641319)(C:\Users\ADMINI~1\AppData\Local\Temp\1631075126667.png)]

2.文件夹结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EGgi1wZy-1631105641321)(C:\Users\ADMINI~1\AppData\Local\Temp\1631075165146.png)]

3.设置视口标签以及映入初始化样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNnho3Jr-1631105641322)(C:\Users\ADMINI~1\AppData\Local\Temp\1631077674768.png)]

4.设置公共common.less文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-od4jPGyt-1631105641323)(C:\Users\ADMINI~1\AppData\Local\Temp\1631078028528.png)]

5.新建index.less文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oN3JGNqk-1631105641325)(C:\Users\ADMINI~1\AppData\Local\Temp\1631085106566.png)]

作

[外链图片转存中…(img-Y6rmJWnk-1631105641318)]