element 手机适配_解决手机移动端适配的五种方法
移动端适配的五种方法
所谓移动端适配,就是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";
第二种方法:借助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;}}
第三种方法:JS配合修改配合rem适配var designWidth = 375; // 设计稿宽度
var remPx = 100; // 在屏幕宽度375px,的时候,设置根元素字体大小 100px
var scale = window.innerWidth / designWidth; //计算当前屏幕的宽度与设计稿比例
// 根据屏幕宽度 动态计算根元素的 字体大小
document.documentElement.style.fontSize = scale*remPx + 'px';
这里我们计算当前屏幕的宽度与设计稿比后用比例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';
js获取当前屏幕的宽度,将屏幕宽度的16分之一设置给html的font-size// 此时设计稿的宽度为375,定义一个less变量等于16分之一的设计稿宽度
@rem: 375/16rem;
如果此时设计稿中的16可以为任意值,你设置多少,js中屏幕宽度就除于多少再赋值给html的font-size。
若设计稿中的某元素设置宽高为200px.box{
width:200px;
height:200px;
}
此时可以替换为:.box{
width:200/@rem;
height:200/@rem;
}
分析:
设计稿中的元素尺寸都是基于设计稿的宽度而定,如上述,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';.box{
width:200px;
height:200px;
}.box{
width:200/375rem;
height:200/375rem;
}
分析:
这种方法是js动态获取屏幕宽度,直接将html的font-size设置为屏幕的宽度,再在less中进行换算。
若此时js获取的屏幕宽度为750px,html的font-size值设置为750px后,此时计算box的width为400px200/375rem = 200/375*750 px = 400px
感谢您的支持,我会继续努力的!
扫码打赏,你说多少就多少
打开支付宝扫一扫,即可进行扫码打赏哦
element 手机适配_解决手机移动端适配的五种方法相关推荐
- element 手机适配_解决vue移动端适配问题
1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小.所以不用px; 根字体:字体的大小px; px:你就当成cm(厘米)这样的东西吧: 基 ...
- html 自动跳转手机版,HTML实现页面自动跳转的五种方法
在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法,本文继续给大家介绍有关html页面跳转相关知识,一起学习吧. 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同 ...
- java解压缩文件名乱码_解决JDKZipEntry压缩文件名乱码的两种方法
当我们在创建java的项目过程中,有时候会遇到一些棘手的问题,就比如说:在JDk zipEntry压缩中文文件名出现乱码的问题.那么对于这个问题,我们应该怎样来解决呢?今天我们就一起来学习一下它的解决 ...
- java系统慢怎么优化_解决vmware虚拟机速度慢的3种方法
解决vmware虚拟机速度慢的3种方法 使用vmware虚拟操作系统的好处不用多说,但如果虚拟机运行速度十分缓慢,正常使用很卡的话是很痛苦的.本文介绍了3种提高虚拟机运行速度的方法,都是古意人实际操作 ...
- layui移动端适配_实战:移动端适配的最佳实践
移动端适配我们需要做哪些事情? 一个最佳实践除了设置 viewport 和 rem 基准值,随着iPhone手机的不断升级,我们不得不正视以下2个问题: 安全区域适配 识别刘海屏 关于viewpoin ...
- 用户体验改善案例_优化用户体验案例研究的五种方法
用户体验改善案例 重点 (Top highlight) I've had the opportunity to give several portfolio reviews, and I want t ...
- jsp工程防止外部注入_防止 jsp被sql注入的五种方法
一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...
- java list定义和初始化_在 Java 中初始化 List 的五种方法
Java 中经常需要使用到 List,下面简单介绍几种常见的初始化方式. 1.构造 List 后使用 List.add 初始化 这是最常规的做法,用起来不太方便. 2.使用 {{}} 双括号语法 这种 ...
- wireshark提取流量包中的文件_返璞归真——流量中提取文件的五种方法
0×00 简介 本期主要会教大家如何从流量中还原出来文件.下面我将会用5种办法来讲解. 0×01 网络流量提取文件(方法1) 1. 安装依赖 Default yum install -y lib ...
最新文章
- iOS,Android,WP, .NET通用AES加密算法
- linux 防火墻生成器shorewall
- 【Flutter】Flutter 项目中使用 Flutter 插件 ( Flutter 插件管理平台 | 搜索 Flutter 插件 | 安装 Flutter 插件 | 使用 Flutter 插件 )
- com.mysql.cj.exceptions.InvalidConnectionAttributeException
- tensorflow之control_dependencies
- 仿微信添加触摸图片阴影效果
- vbs定时自动发送qq消息
- css3实现奔跑的小人动画
- 验证邮箱的正则表达式
- 神经网络长什么样不知道?这有一份简单的 pytorch可视化技巧
- #bfs#[luogu 2873] [USACO07DEC]泥水坑Mud Puddles
- Linux命令 ln
- android怎么做表格显示数据
- 传统 以太网 时隙(slot time) 理解
- canvas-变换-scale(缩放)
- 如何正确拟订网络推广投资?
- Linux 基础之虚拟机创建与系统安装
- 三阶段--017Day 模块 Requirejs
- 编码 data:text/html;c,[网页设计]图片base64编码利器:在线 Data URI 生成工具 – Duri.me...
- 我们平时常见的SEO百度关键词排名方法