1. meta viewport
首先手机端要加meta
2.使用媒体查询
@media (max-width: 500) { .color{color: red;} 在屏幕宽度小于500像素时才会生效}@media (min-width: 300 and max-width: 500) { 屏幕宽度在 300到 500之间的就生效}复制代码
有了以上两个就可以做响应式布局了。
移动端与手机端不同: 1. 移动端没有hover2. 移动端有touch事件3. 移动端没有resize:不能放大缩小4. 移动端上没有滚动条复制代码
3.rem
1.rem是什么?css有很多的长度单位:px(像素) ,em ,rem, vh, vw1em相当于一个M的宽度,或者一个汉字的宽度,1em气死差不多就等于自己的font-size值,比如 div{font-size:16px;height:2em} 那么这个高度就是2*16=32px,可以这样记下来rem: root em :意思就是根元素的font-size,也就是html元素的font-size,比如:html的font-size是16px 那么 1rem = 16px vh: viewport height 即视口的高度 100vh == 视口高度vw: viewport width 视口宽度 100vw == 视口宽度详细可参考MDN2. 12像素法则12像素法则的意思是,在chrome浏览器中,是可以设置页面最小字号的,默认最小字号是12px,如果你再网页中写了font-size:6px,也不会生效,看到字体也会是12px的注意:!!网页的默认font-size是16像素,面试题:请问如果我不给页面上元素加font-size那么他的font-size是多少,默认是16px复制代码
4. 动态rem
为了使页面在所有设备上都能按比例还原,我们得出:一切单位以宽度为基准,就能保证完美还原设计稿。但是各个单位如 px rem 等都跟宽度是没有关系的。所以IT工程狮们日思夜想,通过js使得rem与页面宽度产生了关系:只要使html得font-size等于页面的宽度,rem又是依赖于html的font-size的,那么1rem 就等于 页面的宽度了。js代码:var pageWidth = window.innerWidth;document.write('')那么这个时候就可以在写宽高的时候用rem的单位去写了复制代码
5.对rem进行微调
第四中的代码,我们在写的过程中会发现,所有的数值都变成了小数,0.4rem,0.2rem等等,那么其实我们可以把font-size变成原来的1%,这样我们在写宽高的时候就可以不用写小数了,可以写成width:40rem等等
但是还会导致一个问题是,在chorme浏览器中有可能会错乱,因为在chrome中页面的font-size不能小于12px(上面提到的12像素原则)。那么下面这种写法,就会导致font-size会小于12px 有可能还会远小于,所以可以不用除以100,除以10就可以了
document.write('')复制代码
1px是最小的单位了,已经不能再小了,所以比如说border为1像素的就直接写成border:1px solid blue;不用再去换算成rem了,font-size也直接写px
6.px 2 rem
如何将px自动换算成rem, (题外话:1.学会命令行 2. 学会英语 3. 学会看文档。掌握以上三个,就可以好好学会less sass webpack等技术) npm config set registry https://registry.npm.taobao.org/:将安装包的下载源切换成淘宝的,使用sass的px2rem