移动端是如何做适配的?
常用的解决移动端布局的方案大概有:
1.flex弹性布局
1)高度定死,宽度自适应,元素都采用px做单位。
2)随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。
2.百分比
3.用框架搭建页面
4.viewport适配
4.1 优点:
1)避免复杂的计算,直接使用UI的标准像素值
4.2 缺点:
2)不能使用meta标签 图片失真情况很严重
5.媒体查询media
6.rem+viewport缩放(也成为1px适配)
1)根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.
5.1优点:
1)media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
2)图片便于修改,只需修改css文件
3)调整屏幕宽度的时候不用刷新页面即可响应式展示
5.2 缺点:
1)代码量比较大,维护不方便
2)为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
3)为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式
6.rem+less(sass)适配
1)viewport也是固定的
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。
2)通过代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)
3)css通过sass预编译,设置量取的px值转化rem的变量$px: (1/100)+rem;
flex布局
父级元素设置display:flex
子级元素通过flex参数来设置缩放比例,缩放条件、排列方式等
缺点:具有兼容性问题
rem布局
这里提供两种思路:
思路1
1)设置根节点字体大小为(为了方便,可以灵活设置:16、32、100等),布局时使用原px/@rem得出rem的值;
2)只需要在js中计算当前设备的clientwidth,然后用clientwidth/16(为font-size字体大小=1rem)–这里表示16rem为设备大小,即将设备看均分成1份
3)假设我们使用750px的设计稿,
举例:
(function () {var styleNode = document.createElement("style");/* 当不除以16时此时1em便占据视口宽度,那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */// var w = document.documentElement.clientWidth;/* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */var w = document.documentElement.clientWidth / 16;//获取视口大小/* 设置此时根元素的fontsize,向html的style样式中添加font-size属性*/styleNode.innerHTML = "html{font-size:" + w + "px!important}";//向head标签中添加style标签,其中包含html{font-size:w;}document.head.appendChild(styleNode);})()
(function () {var styleNode = document.createElement("style");/* 当不除以16时此时1em便占据视口宽度,那么我们给其页面中的元素设置宽高基本都会小于1rem,浏览器的计算并不会特别精准容易出现偏差 */// var w = document.documentElement.clientWidth;/* 所以此时我们除以16,使得16rem便占据了满屏,对于页面中大多数元素的rem都会超过1rem */var w = document.documentElement.clientWidth / 16;//获取视口大小/* 设置此时根元素的fontsize,向html的style样式中添加font-size属性*/styleNode.innerHTML = "html{font-size:" + w + "px!important}";//向head标签中添加style标签,其中包含html{font-size:w;}document.head.appendChild(styleNode);})()
在less文件中(这样省去了复杂的换算)
思路2:
1)设置根节点字体大小为100px(主要为了方便计算),布局时使用原px/100得出rem值;
2)假设我们使用640px的设计稿(即iphone5,分辨率320x,dpr=2),只需要在js中计算当前设备的clientwidth,然后用100*(clientwidth/640)即可适配当前设备
代码:
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
用框架搭建页面
1–bootstrap(基于jQuery的响应式工具,适用于移动,pad、pc)
2.–ElementUI(PC),MintUI(移动端)、vue组件库开发等
媒体查询media(就是根据你需要的几台设备进行适配。代码如下:(注意注意!!!!以下只对你进行了媒体查询设置的设备有用)-------因此有改善的方法,可以继续往下看(即rem适配)
html{font-size: 100px;} /* ip6 */@media screen and (min-width:375px) {html{/*当屏幕尺寸大于375px时*/font-size: 117.1875px;}}/* ip6p */@media screen and (min-width:414px) {html{font-size: 129.375px;}}/* ipad */@media screen and (min-width:768px){html{font-size: 240px;}}
1)这里是以iphone5的屏幕分辨率320为基准,font-size设置成为100px,是为了好计算rem,因为在谷歌浏览器中字体大小是默认为16px,有着这样的运算1rem=16px,所以当你把字体大小设置成为100px的时候,此时,1rem=100px,那么在换算的时候会更加简单,只要将px除以100即可
2)那么如何通过iphone5的屏幕分辨率320以及大小100px来计算iphone6甚至ipad的字体大小呢?
3)我们知道iphone6的屏幕宽度尺寸是375,所以他对于的字体大小是(375100)/320 ,即117.1875px。同理可以算出其他设备的大小。
这里涉及的关系:
当前设备字体/当前设备宽=设计稿字体/设计稿宽
因此:当前设备字体=当前设备宽设计稿字体/设计稿宽,即(375*100)/320
实例介绍:
body设置:
<div> iphone5 </div>
css设置:
width: 100%;height: 1rem;background-color: red;font-size: 30px
再加上上面的设置,这里就不写了。
效果:在iphone5下:
在iphone6下:
可以看到div的高度有变化,变化成了117.19px,说明方法成立。
使用js进行rem适配(rem适配思路2补充)
代码:
(function (doc, win, undefined) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (clientWidth === undefined) return;//以ip5为基准 docEl.style.fontSize =(clientWidth*100) / 320 + 'px';};if (doc.addEventListener === undefined) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false)})(document, window);
我们单独来看这一段代码的意思:(这里是以320为基准,一般设计稿以750、680为基准,将320换成750或者680即可)
docEl.style.fontSize =(clientWidth*100) / 320+ ‘px’;
意思就是说你当前的屏幕尺寸去乘以100,这里的100也就相当于在修改默认字体的大小,变成了100px,(所以在换算成rem的时候,用你得到的px单位再除以100即可)再除以320,就是iPhone5的屏幕尺寸。
算法同上面的,上面的理解了,这里的也就理解了。
如果你想以iphone6为基准,则只需要把屏幕大小换成iphone6的即可:
docEl.style.fontSize =(clientWidth*100) / 375+ ‘px’;
以iphone6为基准的效果图:(body以及css代码同上)
高度是1rem 所以这里是100px
在其他设备上:
在iPhone5上:高度是85.33
即(320*100)/375
在ipad上:
最后 如果根据设计稿的尺寸来写页面的话 如果是640的大小,则是以iphone5的屏幕大小来设置的,你在设置的时候 font-size就要设置成50px,因为设计稿的尺寸640是iphone5的屏幕大小320的两倍,有一个DPR的存在,是2.0。
所以给你一个设计稿,要你写页面,如果说大小是640,即以iphone5的屏幕大小来设置的,则字体大小设置成为50px;
同理,如果设计稿大小是750,即以iphone6的屏幕大小来设置的,字体大小也要设置成为50px。
但是!在换算的时候:还是用你得到的px大小除以100!
viewport适配
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /><title></title><style type="text/css">*{margin: 0;padding: 0;}#box{width: 160px;height: 160px;background: deeppink;}</style><!--ui: 320px320px --- 375pxviewport适配:把整个设计图纸变成屏幕区域大小(屏幕真实css像素大小 = 320) == 布局视口变成320方案1: width=320 (安卓手机不支持)方案2:initial-scale = 375/320 --- 放大操作--></head><body><div id="box"></div></body><script type="text/javascript">//优化!(function(){//屏幕宽var width = document.documentElement.clientWidth; //375//目标宽度var targetW = 320; //比例var scale = width/targetW;var metaNode = document.querySelector('meta[name="viewport"]')metaNode.setAttribute('content','initial-scale='+ scale +',user-scalable=no') })();</script>
</html>
ort缩放(也成为1px适配)
使用代码1:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /><title></title><style type="text/css">*{margin: 0;padding: 0;}#box{width: 8rem;height: 8rem;border: 1px solid #000;}</style><!--1px 适配 -- 物理像素1.布局元素 单位 rem2.边框 单位 px3.通过dpr让元素进行缩放,initial-scale=0.54.布局元素 单位 rem ,反向把缩放比例乘回来 2--></head><body><div id="box"></div></body><script type="text/javascript">//获取dprvar dpr = window.devicePixelRatio; // 2 //比例 // 0.5var scale = 1/dpr;
// var width = document.documentElement.clientWidth;//375//3.通过dpr让元素进行缩放,initial-scale=0.5var metaNode = document.querySelector('meta[name="viewport"]');metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no')var width = document.documentElement.clientWidth;//750//4.布局元素 单位 rem ,反向把缩放比例乘回来 2var styleN = document.createElement('style');
// styleN.innerHTML = 'html{font-size: '+ width/16*dpr +'px !important;}';
// styleN.innerHTML = 'html{font-size: '+ width*dpr/16 +'px !important;}';
// styleN.innerHTML = 'html{font-size: '+ 750/16 +'px !important;}';styleN.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';document.head.appendChild(styleN);</script>
</html>
或者使用代码2:
!function (d) {var c = d.document;var a = c.documentElement;var b = d.devicePixelRatio;var f;function e() {var h = a.getBoundingClientRect().width, g;if (b === 1) {h = 720}if(h>720) h = 720;//设置基准值的极限值g = h / 7.2;a.style.fontSize = g + "px"}if (b > 2) {b = 3} else {if (b > 1) {b = 2} else {b = 1}}a.setAttribute("data-dpr", b);d.addEventListener("resize", function () {clearTimeout(f);f = setTimeout(e, 200)}, false);e()}(window);
移动端是如何做适配的?相关推荐
- Nginx动态、静态分离,Nginx配置中做适配
Nginx[静态,动态] 页面是html,mp3,mp4,txt,doc,pdf 动态脚本语言:shell,PHP,java 一: LNMP (Linux+Nginx+MariaDB==m ...
- (适配方案总结)客户薅公司两台ipad,我还要给做适配?
(适配方案总结)客户薅公司两台ipad,我还要给做适配? 为什么要做屏幕适配? 响应式和自适应 适配方案汇总 PC之可视化大屏 PC之普通适配 移动端适配 适配方案分析 动态加载css和媒体查询 百分 ...
- 【适配】521- 移动端开发各种兼容适配问题(屏幕、图像、字体与布局等)
来源 | https://www.cnblogs.com/coco1s/p/11463599.html 本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之 ...
- 移动端开发的兼容适配与性能优化干货分享
作者:ChokCoco https://www.cnblogs.com/coco1s/p/11463599.html 本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅, ...
- [转载]input[type=file]在移动端各浏览器无法适配打开相机的问题。
原文地址:input[type=file]在移动端各浏览器无法适配打开相机的问题.作者:韩小文 近期有一需求是拍照上传用户头像并能进行区域性的截取操作. 故使用了input[type=file]标签进 ...
- ASP.Net学习笔记002--ASP.Net服务端控件做了什么2
ASP.Net学习笔记002--ASP.Net服务端控件做了什么2 以前写的课程都没有附上源码,很抱歉! 课程中的源码可以加qq索要:1606841559 技术交流qq1群:251572072 技术交 ...
- 前端pc端、手机端适配基本知识
前端pc端.手机端适配问题 一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
- PC端的一些简单适配
PC端的一些简单适配 不同比例的屏幕需要展示的内容一样 16:9 24:9 32:9的屏幕比例需要显示同样的内容 主要是使用的是rem布局, 这里通过调节不同分辨率的时候, 左边盒子和中间盒子的宽度比 ...
- element做树形下拉_点睛时刻:移动端需要做SEO优化吗?移动端该怎么做SEO优化?
随着移动互联网的快速发展,用户从PC端向移动端迁移的大趋势更加明显,但这也使得移动手机网站的seo优化工作还处于探索阶段,很多SEO和站长也都有了一些疑问,移动端需要做SEO优化吗?移动端该怎么做SE ...
最新文章
- 基本电路元件和特性(2)电容器和电容vs.电感器和电感
- 相参、相参积累和相参雷达
- shell中定义变量用双引号和单引号以及不用引号的区别
- VTK:可视化之NoShading
- 更改SYS密码,expiry_date 过期时间 没有更新,普通用户更改密码会更新
- weh shell高大上?一文教你实现
- 【AI视野·今日Robot 机器人论文速览 第六期】Fri, 11 Jun 2021
- 中国互联网关于阿里未来预测:这盘大期如何走
- ZedGraph类库之基本教程篇
- 人物-周鸿祎:周鸿祎
- 单片机74LS164C语言例子,51单片机控制74LS164芯片输出64位的数组
- 删除非字母字符python_python字符串如何去掉英文字母以外的字符
- Android 设备管理器和有权查看使用情况的应用详解
- PredRNN++: Towards A Resolution of the Deep-in-Time Dilemma in Spatiotemporal Predictive Learning 翻译
- 一款网易云音乐歌词制作软件
- Docker 容器文件拷贝及目录挂载
- 2s-AGCN论文理解
- BP神经网络设计与实现
- vulnhub-ted靶场
- 欧氏距离与余弦距离的关系
热门文章
- 基于Pytorch实现的快速人脸识别模型
- Linux man帮助文档
- commons-math3-3.6.1-org.apache.commons.math3.analysis.function-包下的类(二)-中英对照文档及源码赏析
- PMP备考经典题库-敏捷专项练习题一(30道)
- MacW小编分享设计师们常用Sketch插件合集,让你效率翻倍!
- 如何在 Visual Paradigm 中创建流程图丨使用教程
- 华为:将在员工绩效考核中增加“伙伴满意度”选项;谷歌研究员“走火入魔”,被罚带薪休假;魅族回应被吉利收购 | EA周报...
- 【算法】滴滴-2021校招在线笔试0913 X星文
- 如何写一个proto消息
- 基于Hadoop的云计算平台配置