移动端适配的几种方式
2019-06-12 01:12
1191 查看
百分比适配方式
这种方法,只是宽度能适配,高度不能适配,只能设置某个高度固定死
需求:是四个div高度为100px,宽度等宽横向排列
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <style type="text/css"> body { margin: 0; } div { width: 25%; height: 100px; float: left; } .box1 { background: red; } .box2 { background: blue; } .box3 { background: green; } .box4 { background: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
动态生成viewport适配方式
这种方式其实是动态设置缩放比例,动态创建meta标签,并且将计算出来的缩放比例放到这个标签的content属性里面
如果目标尺寸设置320,那么整个屏幕宽度就是320px,设置为750那么整个屏幕就是750px,这样我们页面中的每个元素就可以根据设计图来设置宽高了
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> (function(){ var w = window.screen.width; var targetW = 320; var scale = w/targetW; //当前尺寸/目标尺寸 var meta = document.createElement("meta"); meta.name = "viewport"; meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+"" console.log(scale); document.head.appendChild(meta); })(); </script> <!-- <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> --> <style type="text/css"> body { margin: 0; } div { width: 80px; height: 100px; float: left; } .box1 { background: red; } .box2 { background: blue; } .box3 { background: green; } .box4 { background: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>
rem适配方式
rem适配方式第一步首先需要设置视口的约束(固定的)
[code]<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
先来看一下在rem适配之前是怎么样的
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>Title</title> </head> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background-color: red; } </style> <body> <div class="box"></div> </body> </html>
分析运行结果,当屏幕的宽度是320的时候,这个box的宽度比例是200/320,当换一个手机屏幕大小不一样的,比如375的那么box的宽度比例是200/375
那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了,所以呈现的效果也是不一样的
那么对于这个问题可以使用rem来做适配,rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度,这样整个屏幕就变成了1rem为基准,然后在设置每个元素的时候试用rem来做单位
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>Title</title> </head> <style> *{ margin: 0; padding: 0; } .box{ width:2rem; height: 0.5rem; background-color: red; } </style> <script> (function () { // 获取屏幕区域的宽度 var w = document.documentElement.clientWidth // 获取html根元素 var htmlNode = document.querySelector('html') // 设置字体大小 htmlNode.style.fontSize = w + 'px' })() </script> <body> <div class="box"></div> </body> </html>
这样当我们屏幕宽度是320的时候,1rem就等于320 ,2rem就等于2*320,当屏幕宽度是375的时候1rem就等于375,也就是说1rem会随着屏幕的宽度来变化适应
其他适配插件
项目开发中可以使用上面这几种方式去做移动端的适配也可以使用一些插件来帮我们做这个适配,比如:lib-flexible和postcss-px2rem
使用方法查看这篇文章:基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem
相关文章推荐
- 关于日常书写PC与移动端的几种响应式设计的方式
- 腾讯优测优分享 | 谈谈移动端屏幕适配的几种方法
- 移动端的几种适配
- iOS屏幕适配的几种方式
- 谈谈移动端屏幕适配的几种方法
- 腾讯优测优分享 | 谈谈移动端屏幕适配的几种方法
- 关于屏幕适配问题几种思路与方式
- 移动端之Android开发的几种方式的初步体验
- 移动端适配问题,选vw还是rem?还是其他方式?
- 今天给大分享一下c3的媒体查询,适配所有手机端,常用的几种方式
- 谈谈移动端屏幕适配的几种方法
- 移动端布局的几种方式
- h5 移动端适配3中方式
- 假设系统按单值方式运行且采用最短作业优先算法,有J1,J2,J3,J4共4个作业同时到达,则以下哪几种情况下的平均周转时间为10分钟?
- 创建对象的几种方式
- 移动端适配
- java 线程间通信的几种方式
- 关于整数在内存中的二进制存储方式,打印一个整数的二进制的几种方式
- Unix/Linux中后台运行程序(断开shell连接后继续执行)的几种方式
- mysql拷贝表的几种方式