移动端布局知识点_pcujo-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_18109397/article/details/128595112

本文详细介绍了移动Web开发的基础知识，包括移动端浏览器的现状、视口的概念及其重要性，以及如何通过meta视口标签进行优化。内容还涵盖了二倍图的使用，以解决在不同设备上图像清晰度的问题。在布局方面，讲解了流式布局和flex布局的原理与应用，特别是flex布局的灵活性和优势。此外，提到了响应式设计的重要性，通过媒体查询和Bootstrap框架实现不同屏幕尺寸下的适配。最后，文章总结了移动端技术选型和布局策略，强调了响应式布局在现代Web开发中的重要地位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动web开发之流式布局

1.移动端基础

移动端浏览器现状

都是Webkit

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6GDsC2Ny-1673095630943)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129161411942.png)]

手机屏幕现状

和分辨率,开发只关注px像素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mzHGim7W-1673095630943)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129161458124.png)]

移动端调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3VfAzLPu-1673095630944)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129161645418.png)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1VPIaE3-1673095630944)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129162032054.png)]

2.视口

视口就是显示内容的屏幕区域

布局视口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DuG0VtJE-1673095630944)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129162409628.png)]

视觉视口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igetC2cX-1673095630944)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129162506952.png)]

理想视口

就是设备宽度和布局宽度一致,设备有多宽,布局视口就多宽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJYu6ghs-1673095630945)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129162702244.png)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FhpxKDVK-1673095630945)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129162726756.png)]

meta视口标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idsFLbIi-1673095630945)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129163127103.png)]

标准viewport设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hUOmvHIY-1673095630945)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129163215453.png)]

在移动端布局必须做如下代码设置,不然手机端调试看不清

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>

3.二倍图

因为在移动端里图片会被放大(2倍)变模糊,所以需要二倍图

物理像素和物理像素比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTjTxnZs-1673095630946)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129165047189.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJuEI61T-1673095630946)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129165313940.png)]

多倍图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyDZNcnM-1673095630946)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129165903812.png)]

背景缩放 background-size

cover就是等比例拉伸宽度,一定要宽和高全拉满

contain就是只拉个宽度/高度,宽度/高度拉满了就不拉了

先准备一张放大一倍的图片（二倍图）,再把图片设置background-size:50% 50%;

压缩为原来的一半,就不会糊了

div{
            width: 50px;
            height: 50px;
            border:1px solid red;
            background: url(dog.jpg) no-repeat ;
            /* 把100*100的图片缩放成50*50 */
            background-size: 50% 50%;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2n7LBVIz-1673095630946)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129170638836.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BrdWZaqV-1673095630946)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129170607813.png)]

4.移动端开发选择

移动端主流方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktGoQohZ-1673095630947)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129171533944.png)]

单独制作移动端页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZILOUO3-1673095630947)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129171633658.png)]

响应式兼容pc端移动端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KiXseia-1673095630947)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129171743506.png)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pmFYKisC-1673095630947)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129171814953.png)]

5.移动端技术解决方案

移动端浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0GQzVJQV-1673095630947)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129171906783.png)]

移动端css初始化 normalize.css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gUVH17Dt-1673095630948)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129172038908.png)]

CSS3 盒子模型 box-sizing

css3盒子模型的padding和border不会撑大盒子,因为它把padding算入width中了

box-sizing:border-box是新的盒子模型,即从边框开始算盒子一部分

box-sizing:content-box是旧的盒子模型 ,即从内容开始算盒子一部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-04KCDXRu-1673095630948)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129172722270.png)]

特殊样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MZS84ZQn-1673095630948)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129173051414.png)]

6.移动端常见布局

移动端技术选型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2hDOTQUx-1673095630948)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130080225963.png)]

流式布局(百分比布局)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lYVx2q16-1673095630949)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130081031675.png)]

京东首页制作(流式布局)

一般不用ul ,ul显示bug多,使用要慎重

直接用li就行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W86ex3ya-1673095630949)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130081850089.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N4MVjS9C-1673095630949)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130081908699.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5Ml6vv3-1673095630949)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130081922752.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VfMsa3nl-1673095630949)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130083226681.png)]

line-hegiht:1.5是1.5倍的意思

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dNxSa30Y-1673095630950)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130094747294.png)]

在ps里缩放一半直接测就行

flex布局(强烈推荐)

flex布局体验

传统布局与flex布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xY6FShLJ-1673095630950)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130105211799.png)]

flex布局原理

我们的元素是跟着主轴来排列的

通过给父亲添加flex属性，达到控制子元素摆放位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJowddD3-1673095630950)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130110544539.png)]

flex布局父项常见属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zr4msnWp-1673095630950)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130110805304.png)]

flex-direction 主轴方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KmGxhd1h-1673095630950)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130111303621.png)]

.div{
            
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 我们的元素是跟着主轴排列的 */
            flex-direction: row;
            /* 把主轴设置为y轴,x轴变成侧轴 */
            flex-direction: column;
}

justify-content 主轴排列方式

justify:水平排齐的意思

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ky2QumG-1673095630951)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130112446500.png)]

justify-content:flex-start; 主轴起始点排列
justify-content:flex-end; 主轴结束点排列
让子元素居中对齐
justify-content: center;
子元素平分剩余空间
justify-content: space-around;
子元素两边贴边,再其余均分
justify-content: space-between;

flex-wrap 子元素换行

flex布局默认子元素默认不换行,一行放不下就缩小元素宽度

设置在父盒子里
flex-warp: nowrap;

align-items 侧轴排列方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBOfcwcN-1673095630951)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130114805289.png)]

主轴居中
justify_content:center;
侧轴居中
align-items: center;
侧轴排列/拉伸
align-items: flex-start/strectch;

align-content和align-items区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pKsjXkMo-1673095630951)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130115700323.png)]

flex-flow属性及总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wN5lSuUs-1673095630951)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130120001688.png)]

flex布局子项常见属性

flex属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WK0Xt2N-1673095630951)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130141708348.png)]

1就表示占1/总数,数字越大占用父盒子剩余空间的越多
flex: 1;
ye'ke'yi'xi
flex: 20%;

align-self子项侧轴对齐(了解)

只让三号子项从结尾开始
div span:nth-child(3){
	align-self: flex-end;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xorgYFNe-1673095630952)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130142237287.png)]

携程网首页案例(flex)

一定要注意引入顺序!!!

初始化一定要第一个引入!!!不然就会属性被覆盖!!!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9rbFwfWs-1673095630952)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130155820964.png)]

margin:auto;脱标的盒子不起作用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a8NcMYCZ-1673095630952)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130142457841.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ydLQPMIQ-1673095630952)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130142517394.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-knBjmehX-1673095630952)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130142529685.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yKN31fmm-1673095630953)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130142724978.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I95ql6dI-1673095630953)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130154639478.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bMkf54jC-1673095630953)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130160555670.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rpn2jAsp-1673095630953)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130171123390.png)]

一个盒子既可以当父盒子flex布局也可以被分割

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s95g1Gmu-1673095630954)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221130171251240.png)]

rem布局

rem单位

rem盒子的大小是跟随html字体大小改变的

因此rem布局很方便整体控制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H9TzuaOg-1673095630954)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201081101523.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8P7cUqwt-1673095630954)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201081112617.png)]

媒体查询

在我们屏幕上 并且 最大的宽度是800像素 设置我们的样式
800像素以上就不渲染了
@media screen and (max-width:800px){
	body{bgc:pink;}
}

500像素渲染紫色
@media screen and (max-width:500px){
	body{bgc:purple;}
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cQ1sR5PR-1673095630954)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201081309558.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YivF6MLe-1673095630955)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201081456891.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4HRi0QHW-1673095630955)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201081544815.png)]

实现元素动态大小变换

/* 540宽度设置为100像素 */
        @media screen and (max-width: 540px){
            html{
                font-size: 100px;
            }
        }
        /*拉升到 700宽度设置为200像素 */
        @media screen and (max-width: 700px){
            html{
                font-size: 200px;
            }
        }

引入资源(理解)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4DrU04u3-1673095630955)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201083212576.png)]

less基础

css语言代码冗余很大,重复率很高,难以维护

维护css弊端

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IP9WDhJt-1673095630955)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201083546349.png)]

less介绍

是css扩展语言,是css的预处理语言

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cnv8TfuG-1673095630956)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201084226359.png)]

less使用

less声明需要写在.less文件里而不是.css文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1bnPplev-1673095630956)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201084911395.png)]

安装easy less插件,保存文件自动生成.css文件

less嵌套

less子类可以用嵌套写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zj03eudu-1673095630956)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201085503457.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHFrsOwu-1673095630956)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201085758509.png)]

less运算

注意:运算符前后都要一个空格

@border:5px + 5;
div{
	width:200px - 50;
	height:(400px - 100px) * 2;
}

img{
	width:82 / 50rem;
	height:82 /50 rem;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoGbmT3D-1673095630956)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201090529180.png)]

rem适配方案

大致意思就是先判断你的屏幕宽度为多少当到达那个宽度是我就调用改变 html 的字体大小因为字体大小改变了所以你的盒子大小也就改变了 rem

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zt1VjwHd-1673095630957)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201090913768.png)]

rem适配方案技术

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VvVm8dxI-1673095630957)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201090955990.png)]

rem适配方案1

简单理解是：1个rem代表多大，需要显示的元素多大用几个rem，就这样规定好就可以了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dStxCNHi-1673095630957)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201091217333.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IEUdeyO8-1673095630957)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201092643702.png)]

cssrem插件

响应式布局

响应式开发

就是(通过媒体查询)根据设备屏幕大小,设置布局的宽度大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTBVmrfw-1673095630957)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201094220261.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A2w2tXr2-1673095630958)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201094534105.png)]

超小屏幕下 设置宽度为100%
@media screen and (max-width；767px){
	.container{
		width:100%;
	}
}

小屏幕下 设置宽度为756像素
@media screen and (min-width；768px){
	.container{
		width:750px
	}
}

中屏幕下 设置宽度为970px
@media screen and (min-width；992px){
	.container{
		width:970px;
	}
}

大屏幕下 设置宽度为1170px
@media screen and (max-width；1200px){
	.container{
		width:1170px;
	}
}

响应式案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bVjfgzK-1673095630958)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201095518505.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hiFhPLcI-1673095630958)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201095830893.png)]

bootstrap前端框架

bs简介

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GAtiIiLR-1673095630958)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201100449978.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Raweeuss-1673095630959)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201100504718.png)]

bs使用

bs框架使用就是调用预设好的类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hy8T59FC-1673095630959)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201103306650.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q3OrrsZu-1673095630959)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201103513777.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0m6wwPUM-1673095630959)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201103635680.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcW15bhU-1673095630959)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201104006402.png)]

bs布局容器

bs已经预定义好了.container容器,就不用媒体查询自己写了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvTOYfid-1673095630959)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201104233321.png)]

bootstrap栅格系统

就是把页面划分等宽的列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jeysjOy9-1673095630960)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201104535422.png)]

栅格参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fvO8Yz5D-1673095630960)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201105144151.png)]

大屏下每个占3份(3/12) 中每个占4分(4/12) …

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3D2VgSEk-1673095630960)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201105519371.png)]

列嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlLV9lfD-1673095630960)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201110014834.png)]

列偏移

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cy9jhYap-1673095630961)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201110336813.png)]

列排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QyuQw0oV-1673095630961)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201110310152.png)]

响应式工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMhQnK9E-1673095630961)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201110653027.png)]

7.移动端布局总结

移动端主流方案

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMT7pgWn-1673095630961)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201110745342.png)]

移动端技术选型

OYfid-1673095630959)]

bootstrap栅格系统

就是把页面划分等宽的列

[外链图片转存中…(img-jeysjOy9-1673095630960)]

栅格参数

[外链图片转存中…(img-fvO8Yz5D-1673095630960)]

大屏下每个占3份(3/12) 中每个占4分(4/12) …

[外链图片转存中…(img-3D2VgSEk-1673095630960)]

列嵌套

[外链图片转存中…(img-wlLV9lfD-1673095630960)]

列偏移

[外链图片转存中…(img-cy9jhYap-1673095630961)]

列排序

[外链图片转存中…(img-QyuQw0oV-1673095630961)]

响应式工具

[外链图片转存中…(img-ZMhQnK9E-1673095630961)]

7.移动端布局总结

移动端主流方案

[外链图片转存中…(img-sMT7pgWn-1673095630961)]

移动端技术选型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHgT3D1y-1673095630961)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221201110848414.png)]