今天写一下页面的响应式和自适应，有人说这两个不同，一个考虑了移动设备的界面分辨率，一个就是单纯只关心页面的问题；也有人说这两个一样响应式就是自适应就是为了实现样式去适应页面的大小保持整个界面的ok。然后说说响应式或则自适应的实现方式呗：px就是走media query，em，rem。
先说说media query，说起来这个东西呢，我也不知道，在最开始的时候我只知道那个@media screen and (min-width:1000px){样式}，就是这样个东西会用但是不知道原理，大致是匹配一个分辨率页面宽度之类的走一个样式。大致的语法规则 @media not|only 设备类型 [and 设备特性]*，设备类型这些就是具体指你要针对的那一部分如显示器或者打印机等具体可以细查，而设备特性就是规定对应设备类型的样式设置这些需要了解的小伙子可以细查一下。当你需要media query的时候需要在页面上添加<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalabel=no">具体的这个意思大致就是页面的扩展这类的限制什么的有兴趣的小伙伴可以去查一下，这个对移动端的页面设置可以学到很多。然后这个一般可以针对不同的页面分辨率写不同的样式具体的需要针对实际情况考虑。
接着说下em和rem，这两个东西呢还是比较像的。em和rem都是像素单位，由浏览器转换成像素值，具体取决于设计中字体的大小设置。但是rem转化成像素值取决于页根元素的字体的大小，即html元素的字体大小==》rem* 根元素字体大小。当使用em的时候则是em乘以使用em单位的字体像素值，当然如果它本身没有设置像素值那么直接从上面的父元素去继承。
还有一种方式就是直接去设置百分比，直接去设置页面的宽度高度的百分比，这个首先需要对父元素去设置具体的高度并且让他表现的在整个正常的文档流中，需要想弄的小伙子仔细研究一下。
网友评论