28819人阅读
移动端适配的五种方法
所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示
第一种方法:viewport适配
原理:通过设置 initial-scale
, 将所有设备布局视口的宽度调整为设计图的宽度.
//获取meta节点 var metaNode = document.querySelector('meta[name=viewport]'); //定义设计稿宽度为375 var designWidth = 375; //计算当前屏幕的宽度与设计稿比例 var scale = document.documentElement.clientWidth/designWidth; //通过设置meta元素中content的initial-scale值达到移动端适配 meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
第二种方法:借助media实现rem适配
rem:CSS的长度单位, 根元素字体大小的倍数,只有根元素字体大小有关; html 中的根元素即 html 元素。
大部分浏览器的默认字体大小都是16px,所以1rem = 16px;
rem适配原理:
- 长度单位都是用 rem 设置
- 当屏幕尺寸改变时,只需要修改 html 元素的
font-size
即可实现等比适配 - 我们在制作页面的时候,只考虑跟设计稿相同的屏幕尺寸即可,其他尺寸屏幕自动适配
//对屏幕大小划分了html不同的font-size @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-size:56.25px;}} @media screen and (min-width: 375px) {html{font-size:58.59375px;}} @media screen and (min-width: 400px) {html{font-size:62.5px;}} @media screen and (min-width: 414px) {html{font-size:64.6875px;}} @media screen and (min-width: 440px) {html{font-size:68.75px;}} @media screen and (min-width: 480px) {html{font-size:75px;}} @media screen and (min-width: 520px) {html{font-size:81.25px;}} @media screen and (min-width: 560px) {html{font-size:87.5px;}} @media screen and (min-width: 600px) {html{font-size:93.75px;}} @media screen and (min-width: 640px) {html{font-size:100px;}} @media screen and (min-width: 680px) {html{font-size:106.25px;}} @media screen and (min-width: 720px) {html{font-size:112.5px;}} @media screen and (min-width: 760px) {html{font-size:118.75px;}} @media screen and (min-width: 800px) {html{font-size:125px;}} @media screen and (min-width: 960px) {html{font-size:150px;}}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
第三种方法:JS配合修改配合rem适配
var designWidth = 375; // 设计稿宽度 var remPx = 100; // 在屏幕宽度375px,的时候,设置根元素字体大小 100px var scale = window.innerWidth / designWidth; //计算当前屏幕的宽度与设计稿比例 // 根据屏幕宽度 动态计算根元素的 字体大小 document.documentElement.style.fontSize = scale*remPx + 'px';
- 1
- 2
- 3
- 4
- 5
这里我们计算当前屏幕的宽度与设计稿比后用比例scale乘上100,是因为rem都是基于font-size值设置的,100便于计算,值可以为任意数,比如10,但是Chrome中最小为12,所以这里选择用100;
- 比如某个元素,设计稿设计宽度为 640px, 我们需要在css中设置
width: 6.4rem
- 比如某个元素,设计稿设计字体大小是 16px, 我们需要在css中设置
font-size:0.16rem
从而达到rem适配。
第四种方法:JS动态修改配合CSS预处理器(less)
// 计算屏幕宽度 var screen = document.documentElement.clientWidth; // 计算字体大小,取屏幕宽度的16分之一 var size = screen / 16; // 设置根元素字体大小 document.documentElement.style.fontSize = size + 'px';
- 1
- 2
- 3
- 4
- 5
- 6
js获取当前屏幕的宽度,将屏幕宽度的16分之一设置给html的font-size
// 此时设计稿的宽度为375,定义一个less变量等于16分之一的设计稿宽度 @rem: 375/16rem;
- 1
- 2
如果此时设计稿中的16可以为任意值,你设置多少,js中屏幕宽度就除于多少再赋值给html的font-size。
若设计稿中的某元素设置宽高为200px
.box{ width:200px; height:200px; }
- 1
- 2
- 3
- 4
此时可以替换为:
.box{ width:200/@rem; height:200/@rem; }
- 1
- 2
- 3
- 4
分析:
设计稿中的元素尺寸都是基于设计稿的宽度而定,如上述,200px的宽度是基于设计稿375px而定的,但当js中获取的宽度发生改变时,需要解决适配问题。假设js中获取的此时屏幕宽度为750px,那么此时html的font-size值为750/16 px;
此时计算box的width为400px
注:1rem = 1 html的font-size
此方法不需要进行单位数值的计算,只需要定义一个less变量,再查找替换将单位px换成 /@rem 即可。
第五种方法:JS动态修改配合rem适配
这种方法跟第四种雷同,但不需要再在less中定义变量,只需要进行js获取配合查找替换px即可。
// 计算屏幕宽度 var screen = document.documentElement.clientWidth; // 设置根元素字体大小 document.documentElement.style.fontSize = screen + 'px';
- 1
- 2
- 3
- 4
.box{ width:200px; height:200px; }
- 1
- 2
- 3
- 4
.box{ width:200/375rem; height:200/375rem; }
- 1
- 2
- 3
- 4
分析:
这种方法是js动态获取屏幕宽度,直接将html的font-size设置为屏幕的宽度,再在less中进行换算。
若此时js获取的屏幕宽度为750px,html的font-size值设置为750px后,此时计算box的width为400px
200/375rem = 200/375*750 px = 400px
- 1
移动端适配remlessviewportjavaScript
来自专栏
移动端
ClingJA 1篇文章 2人订阅
发布于2019-07-11著作权归作者所有
相关推荐更多
vue使用rem实现 移动端屏幕适配
weixin_38706100 0 下载
热门推荐 移动端前端适配方案(总结) -- 面试重点
兔子juan 7万+ 阅读 4 评论
vue做移动端适配最佳解决方案(亲测有效)
weixin_38503233 0 下载
怎么做移动端适配?
左边@右边 4352 阅读 0 评论
移动端适配详解 , 给你解决适配烦恼
玄鱼殇 1891 阅读 22 评论
2021.10.13 五种移动端前端适配方案【移动端】
一只白猫罢了 1569 阅读 0 评论
前端解决移动端适配大全!!_Li Derong的博客_前端手机端...
适配方法: 1.单位选择rem rem是相对长度单位,rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size,在布局时使用 rem 单位布局,达到自适应的目的,是 弹性布局 的一种实现方式。 实现方法:...
前端移动端适配方法_Zonebystar的博客_移动端适配
前端移动端适配方法 移动端的适配,是我接触移动端时遇到的第一个大难题, 现在回顾主要的解决方法有一下几种: 1.第一种是通过javascript修改标签的内容,通过控制不同移动端的缩放比例, 来达成适配 2.第二种是通过javascript来改变不同...
前端移动端适配的常用方法总结_第三眼的意中人的博客
方法一、通过js来实现 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { ...
【前端】页面适配?移动端适配屏幕的各种解决方案!_Tyle...
由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 ...
...适配方案(总结)_陈迹·清欢的博客_前端移动端适配方案
移动端前端适配方案 1.Media Queries 优点 缺点 2.Flex弹性布局 3.rem + viewport 缩放 实现原理 4、rem实现 1.Media Queries meida queries 的方式可以说是最早期的移动端布局方式,它主要是通过查询设备的宽度来执行不同的 css 代...
前端移动端适配大法_lover雪玉的博客_前端移动端适配
话不多说,下面就总结了一些移动端常用的适配手法: 一、百分比 使用场景:只要求宽度随屏幕自适应,比如文字块 百分比在PC端自适应上也经常用到,着实相当好用,但它一般用于宽度自适应的设置,高度设置百分比时,要求其父类元素有明确高度。
最新发布 移动端前端适配方案
大鸡腿最好吃 256 阅读 0 评论
两种移动适配方案——rem、vmvh
普通网友 351 阅读 0 评论
04-移动适配
阿良_C 1818 阅读 0 评论
移动端适配
大刘鸭 702 阅读 0 评论