【CSS】移动端适配方案

html-css016

【CSS】移动端适配方案,第1张

代表性的就是阿里的flexible方案

其实是相对于,html根元素的 font-size 属性,rem等比例放大字体;其中设备宽度改变的话,取设备宽的百分之10,作为根元素的字体大小。达到不同尺寸设备自适应的效果

弊端: 通常情况下,用户使用大屏的目的:是希望能看到更多内容,而不仅仅只是放大内容

使用的时候,一般是需要借助编译工具,将 px 转化换算成为 vh 、 vw ( postcss-px-to-viewport )

也可能会遇到不能整除的情况

css移动端的兼容性问题 (适配问题)

一、浮动问题

简述:

我们在平时切页面时,经常会出现用完浮动(float),忘记删除.下面的布局出现莫名其妙的空白高度,导致布局调整失败

避免使用浮动

二、

链接: http://blog.csdn.net/chenmoquan/article/details/41547609

1、水平居中—使用 text-align

2、margin: auto 居中

3、table-cell 居中

4、Absolute 居中

5、使用 translate 居中

6、使用 Flexbox 居中

7、使用 calc 居中

三、常见的兼容性问题

四、css hack

五、css filter

六、更换渲染模式

七、浏览器内核

八、让H5页面适应所有的iphone手机以及安卓机型的六大技巧

九、REM 布局

近期因工作需求,做了一个Vue APP,过程中遇到了曾今经常听说,但从未真正接触过的移动端适配问题,中间遇到了很多挫折,经过了5天吧,这个小app经过来回重写样式好几遍,终于找到了门道,应该算是正路吧,我身边也没有真正做h5 app的伙伴,靠着自己百度、揣摩,外加朋友的帮助,学会了适配的方案。

解释

vw:屏幕可视宽度百分比

vh:屏幕可视高度百分比

vmin:屏幕可视宽度和高度中较小的那个,用这个单位,可以让字体在移动设备无论横屏还是竖屏都保持大小不变

vmax:屏幕可视宽度和高度中较大的那个,用处同上vmin

%:相对于父级元素的百分比尺寸

由于设备的高度会在不同的情况下受到影响,所以我们主要使用vw去控制各个元素的尺寸,因为设备的可视宽度正常情况下是不会有什么东东占用的,我没遇到过,所以设备的宽度就是可视宽度,那么宽度不变,我们使用vw去控制元素尺寸的时候,也就不会受到任何影响了,无论在什么情况下,都能保证元素的位置和尺寸不变了

而我们在适当的情况下需要使用%,因为vw、vh等都是设备的整个屏幕的可视宽高百分比,而有时候我们要的百分比是相对父级元素的,所以不要随便乱用,要想好再用

下面展示下把web app打包成apk全屏应用和在浏览器中浏览的效果

px 转 rem,还有写各种屏幕的不同样式的方案是过去的方案,当前主流使用CSS3的新特性单位,才最佳