前端设计布局技巧

发表时间: 2023-10-19 20:52

一、自适应

自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

「方法：」

使用flex布局
使用百分比
避免写死宽高
添加滚动条
使用rem
...

二、响应式

响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

三、移动端常见的宽高

宽高	比例
320×480	(2:3)
480×854	(约9:16)
480×800	(3:5)
480×640	(3:4)
540×960	(9:16)
600×1200	(1:2)
600×1024	(75:128约9:16)
640×960	(2:3)
640×1136	(40:71约9:16)
720×1280	(9:16)
768×1024	(3:4)
800×480	(5:3)
800×1280	(5:8)
1080×1920	(9:16)
1536×2048	(4:3)
1600×2560	(5:8)

附：智能手机屏幕尺寸和分辨率一览表

尺寸（英寸）	分辨率	像素密度
3.5（苹果 iphone4）	960×640(DVGA)	326PPI
3.7	800×480(WVGA)	252PPI
3.7	800×480(WVGA)	252PPI
3.7	960×540(qHD)	298PPI
4.0	800×480(WVGA)	233PPI
4.0	854×480(WVGA)	245PPI
4.0	960×540(qHD)	275PPI
4.0（苹果 iphone5）	1136×640(HD)	330PPI
4.2	960×540(qHD)	262PPI
4.3	800×480(WVGA)	217PPI
4.3	960×640(qHD)	268PPI
4.3	960×540(qHD)	256PPI
4.3	1280×720(HD)	342PPI
4.5	960×540(qHD)	245PPI
4.5	1280×720(HD)	326PPI
4.5	1920×1080(FHD)	490PPI
4.7	1280×720(HD)	312PPI
4.7	1280×720(HD)	312PPI
4.7	1280×720(HD)	312PPI
4.8	1280×720(HD)	306PPI
5.0	480×800(WVGA)	186PPI
5.0	1024×768(XGA)	256PPI
5.0	1280×720	294PPI
5.0	1920×1080(FHD)	441PPI
5.3	1280×800(WXGA)	285PPI
5.3	960×540(qHD)	207PPI
6.0	854×480	163PPI
6.0	1280×720	245PPI
6.0	2560×1600	498ppi
7.0	800×480(WVGA)	128PPI
7.0	1024×600	169PPI
7.0	1280×800	216PPI
9.7	1024×768(XGA)	132ppi
9.7	2048×1536	264PPI
10	1200X600	170ppi
10	2560×1600	299ppi

1.百分比布局

窗口的hight和width改变的时候，通过给 height、width 、padding、border、margin等属性都是依托父组件的宽高（margin 和 padding 都可以使用百分比值的形式，但有一点可能和通常的想法不同，就是 margin-top、margin-bottom、padding-top、padding-bottom的百分比值参照的不是容器的高度，而是父级容器的宽度）

子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。
子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。border-radius 为百分比，则是相对于自身的宽度

「缺点：」

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位

2、媒体查询布局

通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。

响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

「语法: @media mediatype and not only (media feature) { css-code; }」

//也可以针对不同的媒体使用不同的stylesheets:<link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css"> <link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"><!--上面将浏览器宽度小于等于80px时，应用 styleA 。-->

css引用

@media screen and (max-device-width:960px){     body{background:red;} }

「常用的响应断点阈值设定」

括号后面是样式的缩写

<576px （Extra small）

>=576px （Small --- sm）

>=769px （Medium --- md）

>=992px （Large --- lg）

>=1200px （X-Large --- xl）

>=1400px （XX-Large ---- xxl）

「@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。」

3.rem 响应式布局

rem通常用来适配移动端，按照视口将页面分成10份。

比如现在有 5 个同尺寸的屏幕（750 640 480 375 320），所有屏幕整体宽分成 10rem 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。

屏幕尺寸	html中font-size 大小(1rem 大小)
750px	75px
640px	64px
480px	48px
375px	37.5px
320px	32px

「flexible.js 插件也可以解决」

em和rem类似，都是依据font-size进行页面布局缩放，但是em多依赖于直接亲父级font-size的大小，只会找最近的父级，不直接依赖于整体的html根标签

4.vw、vh 响应式布局

因为 100vw = 100视图窗宽度，100vh = 100 视图窗高度，那么按照750的设计稿100vw就是750.那么1vw就是7.5px

屏幕尺寸	1vw
750px	7.5px
640px	6.4px
480px	4.8px

5. flex 弹性布局

flex-direction , flex-wrap , justify-content , align-items , align-content 子元素：order , flex-grow , flex-shrink ,flex-basis , align-self

四、圣杯布局和双飞翼布局

双飞翼布局

左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。

圣杯布局

同双飞翼布局一样，左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应，不过更加完整。