一、移动端适配

1、什么是移动端适配

2、认识视口

<!-- width: 设置布局视口的宽度 --><meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

3、移动端适配方案

3.1 媒体查询

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@media screen and (min-width: 320px) {html {font-size: 20px;}}@media screen and (min-width:375px) {html {font-size: 30px;}}@media screen and (min-width:400px) {html {font-size: 40px;}}@media screen and(min-width:500px) {html {font-size: 50px;}}.box {width: 5rem;height: 5rem;background-color: orange;}</style>
</head><body><div class="box"></div></body></html>

3.2 js动态计算

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置font-size之后页面不会随便继承html的大小 */body {font-style: 16px;}.box {width: 5rem;height: 5rem;background-color: orange;}p {font-style: 0.5rem;}</style>
</head><body><div class="box"></div><p>我是文本</p><span>哈哈哈</span><script>// 1.获取html的元素const htmlEl = document.documentElementfunction setRemUnit() {// 2.获取html的窗口宽度const htmlWidth = htmlEl.clientWidth// 3.根据宽度计算一个html的font-size的大小const htmlFontSize = htmlWidth / 10// 4.将font-size甚至到htmlhtmlEl.style.fontSize = htmlFontSize + 'px'}// 保证第一次进来的时候,触发一次setRemUnit()// 当屏幕尺寸发生变化的时候,实时修改html的font-sizewindow.addEventListener('resize', setRemUnit)// 当页面发生跳转的时候触发,前进后退按钮window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})</script></body></html>

3.3 使用库

4、rem计算的方法

4.1 手动计算

  <style>/* 假设设计稿为750px  将他视为10份 每一份为37.5  *//* 即1rem = 37.5px  100px = 100/37.5rem */.box {width: 2.66667rem;height: 2.66667rem;background-color: orange;}p {font-size: 0.373333rem;}</style>

4.2 通过less计算

使用lessc插件使得可以使用less编译器 lessc.org

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet/less" href="./rem_less/index.less"><script src="./js/hy_flexible.js"></script><script src="./js/lessc.js"></script>
</head><body><div class="box"></div><p>我是文本</p></body></html>

.pxToRem(@px) {result: 1rem * (@px/37.5)
}.box {width: .pxToRem(100)[result];height: .pxToRem(100)[result];background-color: orange;
}p {font-size: .pxToRem(14)[result];
}

4.3 postcss-pxtorem

http://www.3qphp.com/web/javascript/4854.html

4.4 利用vscode插件

5、vh、vw单位换算

移动端适配问题解决方案相关推荐

vue做移动端适配最佳解决方案，亲测有效
最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案 ...
移动端适配常用解决方案
几个概念: 设备独立像素(dip).设备像素比(dpr).设备像素设备像素: 即物理像素,指设备能控制显示的最小单位,就是显示屏上一个个的像素点. 设备独立像素(dip): 也称为逻辑像素.密度独立 ...
vue移动端适配解决方案
手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包.在其源码中,通过不同屏幕的像素比来设置scale值,保证当前窗口的device-width始终等 ...
React移动端适配解决方案lib-flexible和postcss-px2rem、node.getIterator is not a function 报错使用postcss-pxtorem
文章目录 React移动端适配解决方案lib-flexible和postcss-px2rem 第一步第二步第三步第四步第五步问题分割线==================== 一.淘宝弹性布 ...
移动端web自适应适配布局解决方案
100%还原设计图,要注意: 看布局,分析结构. 感觉难点在于: 1.测量精度(ps测量数据): 2.文字的行高. 前段时间写个移动端适配的页面(刚接触这方面),查了一些资料,用以下方法能实现: 1. ...
后台管理系统移动端适配解决方案
lib-flexible + postcss-pxtorem 1.安装 npm i lib-flexible npm i postcss-pxtorem 2.在main.js引入 // 移动端适配 i ...
pc端与移动端适配解决方案
一般网站实现pc端与移动端适配的需求,方案有两个: 1.一套页面,从设计时就考虑到跨设备适配,响应式的一步到位: 2.开发两套页面,根据设备尺寸加载加载不同的资源,目前已经不常见了: 一:响应式方案 ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
vue-cli3.0 移动端适配
方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem 用px2rem配合lib-flexible 关于移动端的适配,我喜欢用px ...

移动端适配问题解决方案

文章目录

一、移动端适配

1、什么是移动端适配

2、认识视口

3、移动端适配方案

3.1 媒体查询

3.2 js动态计算

3.3 使用库

4、rem计算的方法

4.1 手动计算

4.2 通过less计算

4.3 postcss-pxtorem

4.4 利用vscode插件

5、vh、vw单位换算

移动端适配问题解决方案相关推荐

最新文章

热门文章