博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端如何做适配?
阅读量:5774 次
发布时间:2019-06-18

本文共 1609 字,大约阅读时间需要 5 分钟。

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

转载地址:http://rhaux.baihongyu.com/

你可能感兴趣的文章
Objective-C快速上手
查看>>
7、log4j.properties
查看>>
网络通信之检测远端连接是否断开连接
查看>>
Disjoint Sets
查看>>
centos 6.8安装java环境
查看>>
各种上传拿shell
查看>>
算法名称
查看>>
整数加减法练习
查看>>
javascript
查看>>
CF709B Checkpoints 模拟
查看>>
PHP简单计算器
查看>>
[self performselector: withObject: afterDelay:];一定时间后执行某个方法
查看>>
卡巴斯基手机安全软件:让遗失手机远离“短信门”
查看>>
C++类模版学习笔记
查看>>
【LabVIEW技巧】工厂模式_简单工厂
查看>>
页面的Tab选项卡 简单实例
查看>>
r语言ggplot2误差棒图快速指南
查看>>
python之处理异常
查看>>
c++中的虚函数
查看>>
遍历form表单里面的表单元素,取其value
查看>>