首页 > 其他分享> 文章详细

(重点)Flex布局和两种适配方式(rem及vw/vh)

2022-02-22 11:58:36 阅读：269 来源： 互联网

标签：flex 盒子 Flex 适配 rem 视口 html vw 宽度

来到重点-flex布局

首先了解一下移动端的特点

pc端和移动端的不同

PC端

屏幕大，网页固定版心
浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）

移动端

手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，可以放心大胆使用CSS新特性

物理分辨率和逻辑分辨率

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率

视口

视口的分类：

布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。

2. 视觉视口。用户正在看到的网站的区域

3. 理想视口。设备有多宽，我的网页就显示有多宽

视口标签

有了视口标签，可以达到我们想要的理想视口。

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

width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

百分比布局

百分比布局，也叫流式布局

百分比布局特点:宽度自适应，高度固定。

来到重点flex布局

flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活。

display: flex; 一定要给亲爸爸加。

弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 :给父元素添加

flex-wrap: wrap;

对齐方式

主轴的对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
`space-around`	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
`space-between`	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
`space-evenly`	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

记忆方法：

两侧没缝隙是 between

缝隙一样大是 evenly

2倍缝隙是 around

侧轴对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center ，可以让元素垂直居中。

align-items: center;

设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

语法：

 flex-direction：column;

修改完毕，主轴是Y轴，侧轴是X轴。

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

语法：

 flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；此时每个子盒子各占三分之一。

.father {
    display: flex;
    height: 300px;
    background-color: pink;
}

.father div {
    /* 每个孩子各占1份 */
    flex: 1;
    /* 默认子盒子和父亲一样高 */
    background: purple;
}

一定要给子盒子添加。

子盒子默认高度会和父盒子一样高。

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

 .top {
     display: flex;
     justify-content: center;
 }
 
 .top div:first-child {
     width: 50px;
     height: 50px;
     background-color: red;
 }
 
 .top div:last-child {
     width: 50px;
     height: 50px;
     background-color: red;
 }
 
 .top div:nth-child(2) {
     flex: 1;
     height: 50px;
     background-color: pink;
 }

注意：中间flex: 1; 和 width 有冲突。优先执行 flex：1；

小结

在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

https://caniuse.com/ 可以查看兼容性

适配方式(rem) (vw/wh)

rem

rem 是一个相对单位，1rem 就是 html 文字的大小

比如

 /* 根html 为 12px */
 html {
    font-size: 12px;
 }
 /* 此时 div 的字体大小就是 24px */       
 div {
     font-size: 2rem;
 }
 rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

则此时 1rem 就是 12px。

媒体查询（了解）

媒体查询 media query 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询, 根据不同的视口宽度, 设置不同的根字号，就完成了适配

语法：

 
 @media (width:375px) {
     html {
         font-size: 40px;
     }
 }
 
 @media (width:320px) {
     html {
         font-size: 30px;
     }
 }

综合：

 <div class="box"></div>

 
  /* 需求： iphone 678   375px  html文字大小为 12*/
 @media (width:375px) {
     html {
          font-size: 12px;
          /*font-size: 37.5px; */
     }
 }
  /* 需求： iphone 678 x  414 html文字大小为 16 */
 @media (width:414px) {
     html {
         font-size: 16px; 
          /* font-size: 41.4px;*/
     }
 }
 
  /* 思考一下，如果414屏幕下，一个盒子宽度沾满屏幕，高度和宽度一样大  414*414。  
     思考一下，如果375屏幕下，一个盒子宽度沾满屏幕，高度和宽度一样大  375 * 375。  
     html文字大小设置为多少？ */
 .box {
     width: 10rem;
     height: 10rem;
     background-color: pink;
 }
  /*目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10 */

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

这个也是值得提倡使用的一种方式。

有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。

  <div class="box"></div>
   <div class="box2"></div>
   <!-- 引入flexible.js 文件   检测屏幕大小， 修改html文字大小  这个js都做了  -->
   <!-- 屏幕分成10等份，每一份是 37.5 px 也就是 1rem = 37.5px; -->
   <!-- 我有一个 375px 的盒子，那么写 rem 是多少？   375px / 37.5px = 10rem  -->
   <!-- 我需要一个 75*75px 一个盒子，那么需要 75 / 37.5 = 2 rem? -->
   <script src="./js/flexible.js"></script>

  .box {
       width: 10rem;
       height: 10rem;
       background-color: pink;
     }
 
     .box2 {
       width: 0.8rem;
       height: 0.8rem;
       background-color: skyblue;
     }

如何把设计稿的px转换为rem

问题：

flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小

例如：当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px
我们的设计稿里面元素大小是固定的吗？

是，而是 px 单位，但是我们开发的时候，要使用 rem 才能适配。
那怎么把我们测量的px 转换为适配的rem呢？

直接使用测量的px值 / 37.5 就是 rem的值

LESS

less 可以帮我们把px单位转换到rem单位。

Less是一个CSS预处理器, Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

Less插件:Easy Less(less文件保存自动生成css文件)

小结

我们的需求的是要做移动端适配：页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小）

方案如下：

flex + rem + flexiable.js + less

我们移动端采取 flex 布局。
rem单位：做移动端适配的。
- rem相对单位，跟html文字大小有关系
媒体查询： 检测屏幕的视口宽度
flexiable.js ：可以根据屏幕的宽度自动修改html文字大小
less: less让我们的css具有了计算能力
- less 可以让我们很方便的把 px 转换为 rem

vw

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下，我们把屏幕分为平均的 100等份。

1vw = 1 / 100 屏幕的宽度

1vw 和 1%

widith: 1vw;

width: 1%;

vw 和 1% 有没有区别：

vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px
百分比以父盒子为准。假如父盒子是 200px，则 1% 是 2px

px 如何转为vw

我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份，则 1vw = 3.75 px

有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则写成 vw 是多少？ 1vw * 1vw

又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则转换为vw 是多少？ 10vw * 10vw

有一个盒子 68px * 29px ，则我们写代码 less vw ？

 width: (68 / 3.75vw);
 height: (29 / 3.75vw);

标签：flex,盒子,Flex,适配,rem,视口,html,vw,宽度
来源： https://blog.csdn.net/xiangeyyds020209/article/details/123064910

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9