如何做移动端适配?

简介: 如何做移动端适配?

前言


css像素:代码中使用的逻辑像素,衡量页面,上的内容大小


设备像素:即物理像素,控制设备显示的单位,与设备、硬件有关


设备独立像素:与设备无关的逻辑像素,不同于设备像素(物理像素),不是真实存在的。


设备像素比: 定义设备像素与设备独立像素比的关系window.devicePixelRatio)设备像素比=物理像素/设备独立像素


分辨率:指的是屏幕.上垂直和水平的总物理像素


移动端适配方案,总结如下:

px + viewport适配

rem布局

。CSS3媒体查询适配

。基于设计图的rem布局

。基于屏幕百分比的rem布局

。小程序的rpx布局


vw布局

。通过媒体查询的方式即CSS3的meida queries

。以天猫首页为代表的flex弹性布局

。以淘宝首页为代表的rem+viewport缩放

。rem方式


一、px + viewport适配

通过动态设置meta标签的viewport让css中的1px等于设备的1px。


首先必须要了解到viewport是什么,viewport是用户的网页可视区域。手机浏览器就是页面放在一个虚拟的“窗口”(viewport) 中,通常这个虚拟的窗口比屏幕宽,这样就不会破坏没有针对手机浏览器优化的网页的布局(不 会把每个网页挤到很小的窗口中)。用户可以通过平移和缩放来看网页的不同部分。


通常viewport是指视窗、视口,浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的,pc端的视口是浏览器窗口区域,而在移动端有三个不同的视口概念:布局视口、视觉视口、理想视口

布局视口:

在浏览器窗口css的布局区域,布局视口的宽度限制css布局的宽。为了能在移动设备.上正常显示那些为pc端浏览器设计的网站,移动设备.上的浏览器都会把自己默认的viewport设为980px或其他值,一般都比移动端浏览器可视区域大很多,所以就会出现浏览器出现横向滚动条的情况


视觉视口:

用户通过屏幕看到的页面区域,通过缩放查看显示内容的区域,在移动端缩放不会改变布局视口的宽度,当缩小的时候,屏幕覆盖的css像素变多,视觉视口变大,当放大的时候,屏幕覆盖的css像素变少,视觉视口变小。


理想视口:

一般来讲,这个视口其实不是真实存在的,它对设备来说是一个最理想布局视口尺寸,在用户不进行手动缩放的情况下,可以将页面理想地展示。那么所谓的理想宽度就是浏览器(屏幕) 的宽度了。


设置理想视口就在header中加入这样一行代码:


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


二、rem布局


1.CSS3媒体查询适配meida queries

通过查询设备的宽度来执行不同的css代码,最终达到界面的配置


@media screen and ( max -width: 320px){
    //适配iphone4的css样式
}
@media screen and (max-width: 375px){
    //适配iphone6/ 7 /8的css样式
}
@media screen and (max-width: 414px){
    //适配iphone6/7/8 plus的css样式
}
...


优点:


mediaquery可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局方法简单,只需修改css文件调整屏幕宽度时不用刷新页面就可以响应页面布局


缺点:


代码量大,不方便维护不能够完全适配所有的屏幕尺寸,需要编写多套css样式为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式


2.基于设计图的rem布局

通常拿到的设计图宽度的是750也就是基于iphone6/7/8的设计图,如果要想让1px像素等于设计图的1px该怎么做呢?


其实很简单,直接让根元素的font-size: 0.5px即可(因为是2倍图,1px等于2实际像素,所以为0.5px)。但是市面上的机型不一定都是750px的,这个时候就要进行等比缩放了。


html.fontSize = clientWidth / 750


还有一个小问题,平常开发都是基于谷歌chorme开发的,chrome并不支持font-size小于12的字体。所以可以让font-size大于12,在以上基础上将结果放大100倍,然后写样式的时候再除以100。嗯~看到这里我觉得很绕啊,不过开始放在这里了。js伪代码:


html.fontSize = clientWidth / 750 * 100


样式:


.element {
    width: 0.1rem; /*实际到6/7/8. 上就是10px
}

3.基于屏幕百分比的rem布局

这种方式是给元素设置百分比,例如2个div想占满宽度100%,那么一个div设置宽度为50%,这样不固定宽度,使得在不同的分辨率下都能达到适配。


各子元素或属性的百分比设定计算:


1.子元素width、height的 百分比:子元素的width或height中使用百分比,是相对于子元素的直接父元素


2.margin和padding的百分比:在垂直方向和水平方向都是相对于直接父亲元素的width,而与父元素的height无关


3.border-radius的百分比: border-radius的百 分比是相对于自身宽度,与父元素无关


优点:宽度自适应,在不同的分辨率下都能达到适配


缺点:百分比的值不好计算需要确定父级的大小,因为要根据父级的大小进行计算各个属性中如果使用百分比,相对父元素的属性并不是唯- -的高度不好设置,一般需要固定高度


4.小程序的rpx布局

小程序有个rpx可以根据屏幕自适应。官方文档的介绍:可以根据屏幕宽度进行自适应。规定屏幕宽为


750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像,素,1rpx = 0.5px = 1物理像素,也就是说,它内部的实现原理其实和基于设计图的rem布局的原理差不多。只不过小程序内部处理了一下,让rpx直接能够根据屏幕宽度自适应,而不是像rem那样依赖于根元素的font-size.


三、VM布局

css3中引入与视口有关的新的单位vw和vh, vw表示相对于视口的宽度,vh表示相对于视口高度。在这里插入图片描述那么问题来了,平时拿到的设计图都是基于px标记的,怎么将px转为vw呢? vw单位换算:视口宽度为100vw占满整个视口区域,那么1vw .相当于占整个视口宽度的1%,所以1px= 1/375*100vw所有的页面元素都可以直接进行计算换算成vw单位,但是这样计算和百分比方案计算比较类似,都会比较麻烦。


但是有一个比较厉害的插件postcss-px-to-viewport,可以预处理css,将px单位转换为vw单位,但是需要进行-些相关的webpack配置。详情可看官方配置解释。


loader: 'postcss-loader'
options: {
    plugins: ()=>[
        require( 'autoprefixer')({
            browsers: ['last 5 versions'
        ]}),
        require('postcss-px-to-viewport')({
            viewportWidth: 375,
            viewportHeight: 1334,
            unitPrecision: 3,
            viewportUnit: 'vw',
            selectorBlackList: ['.ignore','.hairlines'],
            minPixelValue: 1,
            mediaQuery: false
        })
    ]
}

优点:指定vw\vh相对与视口的宽高,由px换算单位成vw单位比较简单通过postcss-px-to-viewport插件进行单位转换比较方便


缺点:直接进行单位换算时百分比可能出现小数,计算不方便

兼容性-大多数浏览器都支持、ie11不支持;少数低版本手机系统ios8、android4.4以下不支持  

相关文章
|
3月前
|
Web App开发 前端开发 UED
移动端适配布局指南:打造完美用户体验的秘密武器
【8月更文挑战第26天】在Web前端开发中,选择合适的移动端适配方案对确保跨设备的良好显示与用户体验至关重要。常用方案包括:媒体查询实现响应式布局;百分比、flexbox与CSS Grid布局提供更灵活的设计;结合viewport元标签和rem单位实现等比缩放;利用第三方库如Bootstrap加速开发。实践中应综合运用这些技术,并通过广泛测试保证兼容性和效果。
58 4
|
2月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
76 0
|
3月前
|
前端开发 小程序
移动端适配方案
【8月更文挑战第1天】
|
3月前
|
Web App开发 前端开发
什么是移动端适配
【8月更文挑战第2天】
|
3月前
|
前端开发
移动端适配问题
【8月更文挑战第6天】
53 4
|
3月前
|
前端开发 JavaScript
移动端适配
【8月更文挑战第4天】
39 4
|
6月前
|
Web App开发 前端开发 UED
谈谈你是如何做移动端适配的?
对于移动端适配,一种常用的方法是响应式布局(Responsive Layout)和媒体查询(Media Queries)。以下是一些常见的移动端适配策略:
37 0
|
JavaScript
深入了解移动端适配的方案
深入了解移动端适配的方案
249 0
|
编解码 前端开发 JavaScript
前端移动端优化和适配
前端移动端优化和适配
201 0
|
编解码 前端开发
移动端适配方案总结(一)
由于自己太久没开发移动端的页面,个人觉得移动端开发相比较PC端开发最大的不同,在于需要去适配各种尺寸的手机屏幕,尤其还有1px的问题。
160 0