小结移动端做自适应

1、在HTML的头部加入meta标签

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

width=device-width表示网页的宽度等于设备屏幕的宽度,
initial-scale=1.0表示设置页面初始的缩放比例为1,
user-scalable=no表示禁止用户进行缩放,
maximum-scale=1.0minimum-scale=1.0 表示设置最大的和和最小的页面缩放比例
webstorm中:meta:vp 加tab键可以自动生成


2、百分比布局

要想设置当前容器的高度或宽度百分比,必须“明确”知道父容器的高度或宽度


3、响应式页面的实现
常见的两种方法:
1.媒体查询@media 查询——媒体查询可以针对不同的屏幕尺寸设置不同的样式
2.bootstrap下的栅格布局


4、页面使用相对字体 emrem
 rem是CSS3新增的一个相对单位(root em,根em)
 
当html设置较大的fontsize时,块元素内的行内元素margin、padding会出现额外的值,
解决办法是把外面包的块元素fontsize设置为0。


5、Js动态设置rem来实现移动端字体的自适应
利用Js获取设备屏幕的宽度,并根据屏幕的宽度动态改变根元素html的font-siz属性的作用
例:让1rem=100px;动态设置方法:

//获取html元素
var html = document.getElementsByTagName('html')[0]; 
//屏幕的宽度(兼容处理)
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小
html.style.fontSize = w / 750 + "px";

or:

         var html = document.documentElement;
         var hWidth = html.getBoundingClientRect().width;
         html.style.fontSize = hWidth / 7.5 + 'px';

6、图片的自适应

 img{ max-width: 100%;}

ps:windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令: img { -ms-interpolation-mode: bicubic; }

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页