一：必读：响应式和自适应的区别：二：rem 是如何实现自适应布局的：

一：在头部加入代码

1.第一行： 这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。

2.第二行代码：

二：用rem替代px（代码方案一）   给根元素设置字体大小为20px。html,body{font-size:20px}, 要记得本js的1rem=40px哦

后面页面中所有的尺寸按照PSD上面量出来后除以40转换成rem单位的数值，注意是任何尺寸都要需要去除以40，这比第一种设置百分比按照父元素的宽度去计算方便很多。

a、图片需要设置宽和高，PSD量出来后除以40，少一个都不行，只设置一个图片会被拉变形。 b、做手机端页面时，清除margin和padding 用*可能清除不掉，需要加上标签名字去清除。 c、其他的按照正常的去做。

二：用rem替代px（代码方案二）  下面代码中的640指的是手机的屏幕宽度，所以这里用i=640指代屏幕的最大宽度，最小是320px，要记得本js的1rem=100px哦，其实是为了好换算，比如 font_size:14px;我们就可以写成，font_size:0.14rem。

三：也可以用Media实现

拓展---------------------------

标签： 鲁中、

本文地址： https://rmp.kub2b.com/article/344544.html

上一篇：6寸是多少厘米61寸手机有多大6寸是多少厘米...
下一篇：探秘电视剧短视频宝藏地...