响应式布局流式布局

Posted 2023-04-18

参考技术A 响应式布局：根据不同的尺寸适配
viewport
width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px
通俗理解：我们这个操作其实展示当前这个页面一共有多宽（浏览器的宽度）

高清屏幕：苹果手机是二倍高清屏幕，也就是我们在手机上看到的那张100 100的图片，其实苹果手机是按照200 200的尺寸进行渲染的，
如果真实图片是100 100，最后呈现出来的就是被拉伸后边模糊的效果
苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以，安卓不用
DPI适配思想:我们在做页面的时候，最好每一张图片都准备两套或三套比如：
logo.png 100 100
[e-mail]
[e-mail]

响应式布局的解决方案：流式布局法
1、容器或者盒子的宽度一般都不写固定的值，而是使用百分比（相对于视口区域的百分比）
其余的样式：字体、高度、margin、padding都按照设计稿上标注尺寸的一半来设置
对于有些屏幕尺寸下我们设置的固定值看起来不是特别好看的话我们使用@media微调

在真实项目中，设计师给我们的设计稿一般是 640 960 640 1136 750*1334
常用的手机尺寸：5s一下都是320px 6是375px 6plus是414px的宽度
常用的安卓手机尺寸：320、360、480、540、640、720
特殊情况，设计师的设计稿是640px 我们的素材图也是640px的，这样的话在iphone6/iphone6 plus展示的时候，图片不够大，这种情况下我们需要单独找设计师要一张更大的图

开始项目之前的准备
http://www.jianshu.com/p/b7836e8b88ec
http://www.jianshu.com/p/be1f77040606
移动端样式重置 http://www.jianshu.com/p/92766697b564

css高级篇 (布局：静态流式弹性自适应响应式)

各种布局

• • css发展时间线
  • 固定布局&静态布局（px）
  • 流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）
  • 弹性布局（em/rem、flex）
  • 自适应布局
  • 响应式布局

css发展时间线

时间	新技术
1996	css1
1998	css2
2010	css3、响应式布局
2012	媒体查询
2017	grid

固定布局&静态布局（px）

固定宽度，然后居中。缺点：随着现在屏幕大小的不同化，屏幕太大留白就很多。

流式布局（百分比、vw/vh-----vw/vh有些浏览器或低版本不兼容）

宽高使用百分比，放大缩小。缺点：字体没法百分比调整，宽度太小字体等排版会混乱。

弹性布局（em/rem、flex）

根据根元素字体大小变化，进行缩放。比如高度2rem

自适应布局

宽度变化，进行缩放，样式整体不会有啥变化。缩放之后，要刷新页面才会进行重新布局。（多套代码，分别都是弹性布局或者固定布局，所以地址可能也有变化。相当于多个vue项目）

主要针对（320 480 760 960 1200 1600）六套。一般电商这种页面复杂的，两套就够了。

网站例子：https://www.ui.cn/ 缩小到很小之后,刷新一下会弹到 http://m.ui.cn/，可以看出刷新前一直是4个，刷新后是两个
例子2：亚马逊。

响应式布局

宽度变化，一行可能变两行以上，样式也会发生变化。缩放的同时，直接进行换行等，很丝滑。（一套代码，配合媒体查询）
网站例子：思否，缩小之后，左侧菜单直接收成标签，再缩小，变成横着的菜单。