前言：
目前大家对“rem布局面试题”大致比较讲究，咱们都想要了解一些“rem布局面试题”的相关文章。那么小编在网摘上搜集了一些有关“rem布局面试题””的相关资讯，希望姐妹们能喜欢，姐妹们快快来了解一下吧！rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root
例如：html{font-size:10px} 则 2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html
字体的大小
适配方案步骤：
1、首先动态计算 html 的 font-size2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项<meta name="viewport" content="width=device-width,user-scalable=no"/><style>body{margin: 0; }div{/*width: 80px;*/height: 100px; width: 4rem; height: 4rem; /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/background: green; float: left; } <style><body><div>1</div><div>2</div><div>3</div><div>4</div></body><script>(function(){ var html=document.documentElement; var width=html.getBoundingClientRect().width; //获取屏幕宽度(设备独立像素)如 iPhone6 为414html.style.fontSize=width/16+'px'; // html 的 font-size = 20px//iphone5 下 1rem=20 这里之所以除以 16，是因为要把宽度分成 16 份，这个数并没有固定，一般选 15，16，以 ipone5 为准是 16，因为一除可以得到整数 20，好计算。})(); </script> 注意：1、必需动态的去设置 html 的大小，才能适配2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem 换算值是根据 psd 设计图的宽度/系数的 rem 系数以 640px 设计稿和 750px 的视觉稿，网易这样处理的：var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem时：1rem = 1px * 0.01; 在 750px 设计稿上：设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%；在 ipone6 上：width = document.documentElement.clientWidth = 375px；1rem = 375px / 7.5 = 50px; 0.75rem = 37.5px; (37.5/375=10%；占屏幕 10%)在 ipone5 上：width = document.documentElement.clientWidth = 320px；rem = 320px / 7.5 = 42.667px; 0.75rem = 32px; (32/320=10%；占屏幕 10%)故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成 n 份2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数，是还要根据设计稿能整除的数。）3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签，可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布 局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转 化为 1rem 了特点：1、所有有单位的属性会根据屏幕的尺寸自动计算大小2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大3、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 remTips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成rem，sublime 也可以通过插件进行自动转换3.1）打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置3.2）less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示比如想设置宽度为 187px，高度为 100px 的元素，可以通过下面方式计算适配@rem：25rem； /*这是 1rem = X px 的 X 的值，但是用了 rem 做单位而已*/div{ width: 187/@rem; height: 100/@rem; }弹性布局适配(会配合 rem 适配使用 )兼容情况IE10 及以上、ios9 及以上、android4.4 及以上版本支持特点1、默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度2、父级加了这条属性，子级的 float、vertical-align 就会失效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 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在剩余空间也不扩展剩余空间：剩余空间=父级的宽度-所有子元素的宽度和注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置了文字，会撑开有初始宽度子元素宽度计算公式子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的 flex-grow 属性值之和*子元素的 flex-grow 属性值+子元素初始宽度3、flex-shrink：收缩比例flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的话，就不会收缩超出空间：超出空间=所有子元素的宽度和-父级的宽度子元素宽度计算公式 1、算出超出空间，所有子元素的宽度和-父级的宽度 2、子元素的初始宽度*子元素的 flex-shrink 值 3、算出第二步所有结果的和 4、每个子元素的第二步/第三步*第一步 5、子元素的初始宽度-第四步 flex-basis：元素的大小 flex：以上三个属性的简写 align-self：单独的垂直对齐方式（交叉轴方向上）
#挑战30天在头条写日记#
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #rem布局面试题
