layui移动端适配_web前端-移动端适配方案
三微授渔,授你以渔
一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基本是不可能了,每个设备的右边所展示的内容大小就不尽相同,这个时候就需要web前端工程师进行移动端适配。下面我们详细了解一下。
如何适配
我们先设置一个meta,然后再进行适配。meta的各个属性不在解释,有兴趣的同学可以自行了解。
<meta name='viewport' content='width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;'>
适配方法:
1.单位选择rem
rem是相对长度单位,rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size,在布局时使用 rem 单位布局,达到自适应的目的,是 弹性布局 的一种实现方式。
实现方法: 首先获取文档根元素和设备dpr,设置 rem,在html文档加载和解析完成后调整body字体大小; 在页面缩放 / 回退 / 前进的时候, 获取元素的内部宽度,重新调整 rem 大小。
Js代码(在header添加)
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize =Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;除以750,乘以32,就是原本是750大小的32px;
// 如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
接下来就可以使用rem作为css单位了
2.vh/vw方案
vh、vw 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。 使用sass进行适配
//iPhone 6尺寸作为设计稿基准
$vm_base:375;
@function vw($px){
@return ($px/375)*100vw;
}
设置相应的vw之后就可以使用vw作为css单位,如:
.title{
font-size:vw(16);
}
3.基于媒体查询+rem
@media screen and (min-width:350px){
html{font-size:342%;}}
@media screen and (min-width:360px){
html{font-size:351.56%;}
}@media screen and (min-width:375px){
html{font-size:366.2%;}
}@media screen and (min-width:384px){
html{font-size:375%;}
}@media screen and (min-width:390px){
html{font-size:380.85%;}
}@media screen and (min-width:393px){ /* 小米NOTE */
html{font-size:383.79%;}
}@media screen and (min-width:410px){
html{font-size:400%;}
}@media screen and (min-width:432px){ /* 魅族3 */
html{font-size:421.875%;}
}@media screen and (min-width:480px){
html{font-size:469%;}
}@media screen and (min-width:540px){
html{font-size:527.34%;}
}@media screen and (min-width:640px){
html{font-size: 625%;}
}
@media screen and (width:720px){
html{font-size: 703.125%;}
}
接下来就可以使用rem作为css单位了,而不用编写js,各有优劣。
4.基于媒体查询+rem,这里不做赘述
layui移动端适配_web前端-移动端适配方案相关推荐
- 前端pc端、手机端适配基本知识
前端pc端.手机端适配问题 一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
- 【前端】页面适配?移动端适配屏幕的各种解决方案!
前言 由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽 ...
- 移动端高清、多屏适配方案
2019独角兽企业重金招聘Python工程师标准>>> 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件 ...
- Web前端——移动端页面开发
Web前端笔记 第五部分:移动端页面开发 1. 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示 ...
- 前端pc端和移动端的区别?
1.兼容性 pc端需要考虑浏览器兼容性,移动端主要考虑屏幕分辨率和不同系统的兼容性. 2.页面布局 PC端常用布局固定宽度980px居中,移动端屏幕的大小和分辨率不同,多用响应式布局,使用em(以父元 ...
- 移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局 今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
- 移动端web设计尺寸_移动端页面设计规范尺寸、h5页面设计规范尺寸,h5适配
https://www.cnblogs.com/fang51/p/4286481.html 移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼.今天来总结一 ...
- html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局 今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
- 前端移动端web开发(一)
一.前端开发 1.前端开发分类: PC端开发:页面主要运行在PC端浏览器中 移动端开发:页面主要运行在手机上 移动web开发 在移动端表现良好的页面,如新浪网 混合式开发(Hybrid App) 也叫 ...
最新文章
- c# winform 用子窗体刷新父窗体,子窗体改变父窗体控件的值
- python获取数组中大于某一阈值的那些索引值_java矩阵计算及其在统计中的应用(一)...
- 架构师速成6.6-知识的收集整理学习
- php有意思知识分享,分享几个有意思的数组方法
- [VNCFT2021]gocalc0复现
- 猫眼娱乐2020年上半年交出最差答卷,下半年能满血复活吗?
- java高并发(十三)并发容器J.U.C--AQS
- iis管理常用命令 创建IIS站点 应用应用程序 及虚拟目录
- 侍魂服务器维修,侍魂胧月传说合服活动开启 4月15日更新内容预告
- 飞鸽传书是怎么就变成飞秋了的?
- 三、系统分层和分割策略
- 金九银十招聘季,程序员跳槽BAT最新面经
- 大话设计模式--抽象工厂模式 Abstract Factory -- C++实现实例
- 暑假作业点评:运动会管理系统设计说明书
- 最最简单的几个Mac终端命令
- 2017IMO第五题
- 硬件工程师基础知识(http://huarm.taobao.com/ )
- htc hd2刷android,真正的刷机之王! HTC HD2成功刷入安卓7.0
- 计算机教育杂志有核心期刊吗,计算机教学论文参考文献集 计算机教学核心期刊参考文献哪里找...
- 服务器显卡芯片,Intel服务器独立显卡单卡四芯原来如此
热门文章
- nvarchar(max)和表扫描
- 四边形可以分为几类_大件物流有哪些公司?大件物流公司的业务可以分为哪几类...
- java正式测试数据隔离,开发环境要不要和测试环境隔离?
- fragment类中的点击事件空指针异常
- mysql的压缩包安装_mysql 5.7.24 压缩包安装配置方法图文教程
- Jsp+Ssm+Mysql框架实现的手机WAP版外卖点餐系统
- linux wkhtmltopdf换字体,ubuntu – 更新后Wkhtmltopdf字体大小增加
- hdu 6395Sequence【矩阵快速幂】【分块】
- 《C++ Primer Plus(第六版)》(30)(第十四章 C++中的代码重用 编程题答案)
- 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)