移动端前端布局(移动端前端布局是什么)
发布网友
发布时间：2024-09-10 07:58
共1个回答
热心网友
时间：2024-09-25 22:58
这是一些不太惹人注意的知识，烂没但是掌握了他会对你的前端不具有很大帮助。
在前兆亩端布局时，我们将长度单位分为两种，一种是绝对单位，一种是相对单位。
上述这些就是绝对单位，这些单位在现实中有绝对定义，不会随着你的布局平台大小比例变化而变化（ps：1inch=2.54cm）
没错，你没有看错，px是一个相对单位，px是Pixel的缩写,代表的是图像上最小的一个点的大小，他会因为图像大小的不同而改变，比如1024x1024的一张图，当他的长宽扩大一倍，而分辨率不变（即1024x1024），那么他的每个像素的大小都将扩大一倍
通常我们所指的4.5寸、5,0寸这些手机屏幕的大小指的是手机屏幕对角线的距离（只包括可显示部分，边框部分不包括）
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们饥猜纳的head标签中：↓↓↓
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放
（ps：移动端下定宽写法：viewportwidth=定值（设计稿宽），我们不设置缩放相关属性，移动端浏览器会自动缩放页面以适配屏幕）
rem和em单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em单位基于使用他们的元素的字体大小。rem单位基于html元素的字体大小。em单位可能受任何继承的父元素字体大小影响。rem单位可以从浏览器字体设置中继承字体大小。
（ps：一般情况下，不要给字体大小用rem）
现在前端流行什么页面布局方式？
前端常用页面布局分为下面几种：
1.静态布局
给页面元素设置固定的宽度和高罩隐度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。
优点：简单方便，不存在兼容问题。
缺点：网页无法根据用户设备屏幕的宽度进行自适应。
2.流式布局
也叫100%布局。宽度单位为百分比。流式布局常用的设计答孙模板:左侧固定+右侧自适应，左右固定宽度+中间自适应。
优点：可以适应不同尺寸的屏幕
缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
3.响应式布局
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综物举厅合方式，为不同屏幕分辨率范围创建流式布局。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：
（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
4.弹性布局
就是采用css3中的flex属性。
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
移动端几种常见的界面设计布局这里我画了几种移动端常见的页面布局和他们的各自特点：
1，列表式布局
2，陈列式布局
3，九宫格式布局
4，选项卡式布局
5，轮播图式布局
6，伸展式布局
7，抽屉式布局
8，弹出框式布局
9，横向拓展式布局
10、多面板式布局
1，列表式布局
特点：
内容从上向下排列，导航之间的跳转要回到初始点。
优点：
1、层次展示清晰
2、视觉流线从上向下，浏览体验快捷
3、可展示内容较长的菜单或拥有次级文字内容的标题
不足：
1、导航之间的跳转要回到初始点
2、同级内容过多时，用户浏览容易产生疲劳
3、排版灵活性不是很高
4、只能通过排列顺序、颜色来区分各入口重要程度
场景：
列表菜单适合用来显示平级菜单，且较长或拥有次级文字内容的标题
2，陈列式布局
特点：
布局比较灵活，设计师可以平均分布这些网络，也可根据内容的重要性不规则分布，相对列表式，其优点在于同样的高度下可放置更多的菜单，更具有流动性，曝布流就属于其中一种。
优点：
1、直观展现各项内容
2、方便浏览经常更新的内容
不足：
1、不适合展现顶层入口框架
2、容易形成界面内容过多，显得杂乱
3、设计效果容易呆板
场景：
适合以图片为主的单一内容浏览型的展示
3，九宫格式布局
特点：
相比陈列馆式，布局比较稳定为一行三列式布局。
优点：
1、清晰展现各入口
2、容易记住各入口位置，方便快速查找
不足：
1、菜单之间的跳转要回到初始点
2、无法向用户介绍大概的功能，只能点击进去才能获知，初始状态不如列表式明朗
3、容易形成更深的路径
4、不能直接哗吵展现入口内容
5、不能显示太多入口次级内容
场景：
适合入口比较多的展示，而且导航之间切换不是很频繁的情况，也就是业务之间相对独立，没有太多的瓜葛。
4，选项卡式布局
特点：
导航一直存在，具有选中态，可快速切换到另一个导航。
优点：
1、减少界面跳转的层级
2、分类位置固定
3、清楚当前所在的入口位置
3、轻松在各入口间频繁跳转且不会迷失方向
4、直接展现最重要入口的内容信息
不足：
功能入口过多时，该模式显得笨重不实用
场景：
大部分放在底部，方便用户操作，切换的时候，选中状态高亮显示，有少数放在顶部。适合分类少及其内容乱陪侍同时展示，导航菜单项数量为3-5个；各导航菜单项之间内容/功能有显著差异；用户在各个导航选项之间需要非常频繁的切换操作
5，轮播图式布局
特点：
重点展示一个对象，通过手势滑动按顺序查看更多
优点：
1、单页面内容整体性强，聚焦度高
2、线性的浏览方式有顺畅感、方向感
不足：
1、受屏幕宽度限制，它可显示的数量较少，需要用户进行主动探索
2、由于各页面内容结构相似，容易忽略后面的内容
3、不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面
场景：
适合数量少，聚焦度高，视觉冲击力强乱拦的图片展示
6，伸展式布局
特点：
能在一屏内显示更多的细节，无需页面的跳转
优点：
1、减少界面跳转的层级
2、对分类有整体性的了解
3、清楚当前所在的入口位置
不足：
分类位置不固定，当展开的内容比较多时，跨分类跳转不方便
场景：
适合分类多及其内容同时展示
内容展示的信息多
7，抽屉式布局
特点：
突出核心功能，隐藏其它功能。
优点：
1、不占用宝贵的屏幕空间，让用户首先能聚焦于内容
2、导航的菜单项目不受数量限制，应用的所有信息组织入口都可以加入到抽屉导航中
3、扩展性强，配置灵活，一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中
不足：
1、隐藏框架中其他入口、用户需要一定记忆成本
2、对入口交互的功能可见性要求高
3、容易与应用内的其他交互模式冲突，比如侧滑手势操作
场景：
适合功能较多，信息结构较复杂的产品，用户的注意力聚焦在主信息流的浏览上，不用频繁切换“子产品模块”，且扩展性比较好
8，弹出框式布局
特点：
没有跳出感，适合内容比较少和简单操作的呈现。
优点：
1、在原有界面上进行操作，不必跳出界面，体验比较连贯
2、在用户需要的时候才显示（重要提示除外），不主动干扰
不足：
1、显示的内容有限
场景：
适合内容较少的显示
9，横向拓展式布局
特点：
节省空间，可使用箭头，圆点或显示不全的图片告诉用户还有更多的内容可查看。
优点：
1、查看更多内容不必跳出界面，体验连贯。
2、节省空间。
不足：
横屏宽度有限，更多的内容有数量上限制。
场景：
适合图片或信息组块更多的展示方式。
10、多面板式布局
特点：
能同时呈现比较多的分类及内容。
优点：
1、减少界面跳转的层级
2、对分类有整体性的了解
3、分类位置固定
4、清楚当前所在的入口位置
不足：
1、界面比较拥挤
场景：
适合分类多及其内容同时展示
内容展示的信息不多
以上都是基本布局，在实际的设计中，我们需要结合具体的数据结构特点选用合适的布局，把不同的布局像搭积木一样组合起来完成复杂的界面设计，要考虑信息结构、重要层次以及数量上的差异，提供最适合的布局，以增加产品的易用性和交互体验。
前端常见布局方式常见的布局方式
常见的布局这么几种单列水平居中布局,一列定宽一列自适应布局,两列定宽一列自适应布局,两侧定宽中间自适应三列布局。
一列定宽一列自适应
定位布局
左边的宽度写死，右边盒子使用定位拉伸法实现，left等于左边盒子的宽度，right等于0
.left-box{width:200px;?如核}
.right-box{?position:absolute;left:200px;right:0;}
或者左边的定位写死宽度，右边的写padding-left等于左边的宽度（常用一点）
.left-box{width:200px;?position:fixed;height:100%;?}
.right-box{?padding-left:200px;}
浮动布局
左边的宽度写死并且浮动，右边盒子写overflow:hidden;利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响
.left-box{
????????width:200px;
????????height:150px;
????????float:left;
????????background:#f22;
}
.right-box{
????????height:200px;
????????overflow:hidden;
????????background:#cff;
?}
两列定宽一列自适应上面的布局方式同样适用
常见的三列布局一般使用圣杯布局和双飞翼布局。
圣杯布局和双飞翼布局
两者都属于三列布局，是一种很常见的页指核面布局方式，
三列一般分别是子列、主列和附加列，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，居右且宽度固定。
圣杯布局
div?class="container"?
???div?class="main"/div?
???div?class="sub"/div?
???div?class="extra"/div?
/div
.container?{?
???padding-left:210px;
???padding-right:190px;
}
.main?{?
????float:left;?
???width:100%;
???height:300px;
}
.sub?{?
????position:relative;?
???left:-210px;
????float:left;?
???width:200px;
???height:300px;
???margin-left:-100%;
}
.extra?{?
????position:relative;?
???right:-190px;
????float:left;?
???width:180px;
???height:300px;
???margin-left:-180px;
}
双飞翼布局
div?class="main-wrapper"?
???渣逗掘div?class="main"/div?
/div
div?class="sub"/div?
div?class="extra"/div?
.main-wrapper?{?
????float:left;?
???width:100%;
}
.main?{?
???height:300px;
???margin-left:210px;
???margin-right:190px;
????background-color:?rgba(255,0,0,.5);?
}
.sub?{?
????float:left;?
???width:200px;
???height:300px;
???margin-left:-100%;
????background-color:?rgba(0,255,0,.5);?
}
.extra?{?
????float:left;?
???width:180px;
???height:300px;
???margin-left:-180px;
????background-color:?rgba(0,0,255,.5);?
}
俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距定位；双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位。
其他的话还有
flex布局
Flexbox又叫弹性盒模型。它可以简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。
Flex布局是我最喜欢的布局，合理使用它能够大大减少布局方面的工作,例如以上列举的三列布局也可以使用flex轻松实现。此外在移动端使用flex也比较常见。
响应式布局
网页可以自动识别设备屏幕宽度，根据不同的宽度采用不同的CSS的样式，从而达到兼容各种设备的效果。
响应式布局使用媒体查询(CSS3MediaQueries),根据不同屏幕分辨率采用不同CSS规则
流式布局
流式布常见的就是bootstrap了它提供了一套响应式，移动优先的流式栅格系统(gridsystem)，将屏幕分成12列来实现响应式的。它的实现原理非常简单，MediaQuery加上float布局
