移动端页面简易配置
来源:互联网 发布:开淘宝店必备软件 编辑:程序博客网 时间:2024/05/16 17:00
手机端全部适配简易步骤,不确保没有bug。
1、HTML 的 head 部分中加入如下代码:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中 width:viewport 的宽度,可以指定为一个像素值,如:640,或者为特殊的值,如:device-width (设备的宽度)。
initial-scale:初始缩放比例,即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。
maximum-scale:允许浏览者缩放到的最大比例,一般设为1.0,即原始尺寸。
minimum-scale:允许浏览者缩放到的最小比例,一般设为1.0,即原始尺寸。
user-scalable:浏览者是否可以手动缩放,yes 或 no 。
2、HTML 中引入 一段自动适配所有窗口的 js 。
HTML 代码如下 ( 假设你的 js 在 scripts 文件夹下,命名为 demo.js ):
<script src="scripts/demo.js"></script>
适配的 js 代码如下 (将如下代码复制粘贴到你的 demo.js 中):
(function(doc, win){ var docE1 = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){ var clientWidth = docE1.clientWidth; if(!clientWidth) return; docE1.style.fontSize = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt,recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);
3、CSS 中 在最开始设置 html 的 font - size :20px;(这个 size 标准由你定)代码如下:
html { font-size: 20px;
//此处感觉可以设置 font-size: 62.5%}
然后 假设你部门的设计师给你的 页面 标准宽度为 640px,则页面中所有的 宽高 全部除以 2 ,Chrome 浏览器 模拟手机页面 设置手机型号为 IPhone 4 。这也就是为什么要将所有的宽高除以 2 的原因:IPhone 4 标准 宽 是320 px。 然后 正常的用 px 为单位 写你的 css ,你所需要做的就是你写的页面,要在 IPhone 4 完全正确显示。如果你说,那设计那边给的不是 640 标准怎么办?你只要让你的页面按照设计图在 iphone 4 上正确显示,就木问题。
4、页面 css 全部写完之后,将所有的 px 转换为以 rem 为单位的数字。例如 我设置 body 的 width :320px; 则根据 我在第三步设置的 font - size 值,转换为 rem ,则是
width :16 rem; 【320 / 20 (你设置的标准 font - size) = 16】。
如果你说一个页面的 css 有几百行,写完再去改 太麻烦了,那可以用 px 转换成 rem 的插件。我这里有一款推荐 :cssrem(下载使用网址https://github.com/flashlizi/cssrem)
5、大功告成,随意切换机型,尽情得瑟吧~
- 移动端页面简易配置
- 移动端页面坑
- 移动端页面开发
- 移动端页面开发
- 移动端页面布局
- 移动端页面自适应
- 简易封装移动端touch事件
- 移动端适配简易步骤
- 简易鼠标移动
- 如何调试移动端页面
- 移动端页面性能探究
- 移动端页面性能探究
- 移动端页面编写摘记
- 移动端页面宽度自适应
- 前端移动端页面开发
- 前端移动端页面开发
- MUI移动端页面跳转
- 移动端页面下拉刷新,
- 仿照(小米官网首页轮播图)特效js代码
- magic
- 《3D数学基础:图形与游戏开发 》
- HDU:1256 画8
- XMind思维导图使用详解
- 移动端页面简易配置
- 剑指Offer之斐波那契数列问题
- k8s之多节点,多pod,duoservice之间通信实验
- Scala基础语法学习笔记
- leetcode(55).217. Contains Duplicate
- Ubuntu中普通用户与root用户切换命令
- remove_if详解,配合erase
- 在线考试系统(2)
- 摇一摇 menglong0329