简述弹性盒子 flex 布局及 rem 布局

rem简介：

rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html字体的大小适配方案步骤：

1、首先动态计算 html 的 font-size

2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项注意：

2.1、必需动态的去设置 html 的大小，才能适配

2.2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 fontsize 属性，rem 换算值是根据 psd 设计图的宽度/系数的 rem 系数以 640px 设计稿和 750px 的视觉稿，网易这样处理的：这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px转换 rem 时：1rem = 1px * 0.01;在 750px 设计稿上：故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图 2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中多个元素。所以就把一行分成 n 份 2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算 2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，是还要根据设计稿能整除的数。）

2.3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签，可以设置宽度为切出的图片尺寸，换算成 rem，如果是 backgroundimg，用backgroundsize 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置html的 fontsize 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转化为 1rem 了特点：

2.31、所有有单位的属性会根据屏幕的尺寸自动计算大小

2.32、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大

2.33、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem，sublime 也可以通过插件进行自动转换 ,打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置 ,less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示弹性布局适配(会配合 rem 适配使用 ) 兼容情况 IE10 及以上、ios9 及以上、android4.4 及以上版本支持特点。

flex布局特点:

1、默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度

2、父级加了这条属性，子级的 float、verticalalign 就会失效

3、如果兼容低版本的机型要加前缀webkit，包括后面讲的所有属性容器属性（父元素样式）具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识 3.1）flex---direction：子元素排列方向（主轴的方向，如果设置了 column，则意味着主轴旋转了 90 度） 3.2）flex---wrap：换行方式 3.3）flex---flow：以上两种方式的简写 3.4）justify---content：水平对齐方式（子元素在主轴上的对齐方式） 3.5）align---items：垂直对齐方式（子元素在交叉轴上的对齐方式） 3.6）align---content：多行垂直对齐方式（多根轴线的对齐方式）项目属性（子元素样式）

1、order：排列位置 //如果有两个的值是相等，按书写顺序排列

2、flex--grow：扩展比例 flex--grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间flex--grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在剩余空间也不扩展。
剩余空间：剩余空间父级的宽度所有子元素的宽度和注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度子元素宽度计算公式子元素的宽度（父级的宽度所有子元素的宽度和）/所有子元素的 flexgrow 属性值之和*子元素的 flex-grow 属性值+子元素初始宽度

3、flex--shrink：收缩比例 flex--shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的话，就不会收缩超出空间：超出空间所有子元素的宽度和父级的宽度子元素宽度计算公式 1、算出超出空间，所有子元素的宽度和父级的宽度

2、子元素的初始宽度*子元素的 flex--shrink 值

3、算出第二步所有结果的和

4、每个子元素的第二步/第三步*第一步

5、子元素的初始宽度第四步flex--basis：元素的大小 flex：以上三个属性的简写 align--self：单独的垂直对齐方式（交叉轴方向上）

感兴趣的可以去查阅更多资料谢谢大家

简述弹性盒子 flex 布局及 rem 布局相关推荐

简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴水平主轴主轴的开始位置(与边框的交叉点)叫做m ...
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
CSS3弹性盒子Flex
CSS3弹性盒子Flex 基础知识和术语原文链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 父级(flex容器)的属性 #显示 ...
弹性盒子flex轴的说明
弹性盒子flex中,有两种轴一种是主轴,一种是交叉轴(侧轴). flex默认轴布局是这样的: flex-direction 是决定主轴的方向 row 从左到右水平排列元素(默认值)如上图 row-r ...
弹性盒子 Flex 子元素高度塌陷
弹性盒子 Flex 子元素高度塌陷数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局: · wr ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...

简述弹性盒子 flex 布局及 rem 布局

简述弹性盒子 flex 布局及 rem 布局相关推荐

最新文章

热门文章