移动端适配简易步骤

简介:

手机端全部适配简易步骤,不确保没有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;
}

然后 假设你部门的设计师给你的 页面 标准宽度为 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、大功告成,随意切换机型,尽情得瑟吧~

目录
相关文章
|
11月前
|
安全 数据挖掘 文件存储
开发者如何使用文件存储CPFS
【10月更文挑战第8天】开发者如何使用文件存储CPFS
304 1
|
存储 分布式计算 网络协议
大数据Spark Streaming入门
大数据Spark Streaming入门
284 1
|
消息中间件 弹性计算 数据可视化
SpringBoot 整合 Elastic Stack 最新版本(7.14.1)分布式日志解决方案,开源微服务全栈项目【有来商城】的日志落地实践
SpringBoot 整合 Elastic Stack 最新版本(7.14.1)分布式日志解决方案,开源微服务全栈项目【有来商城】的日志落地实践
MybatisPlus3---常用注解,驼峰转下滑线作为表明 cteateTime 数据表中的 cteate_time,@TableField,与数据库字段冲突要使用转义字符“`order`“,is
MybatisPlus3---常用注解,驼峰转下滑线作为表明 cteateTime 数据表中的 cteate_time,@TableField,与数据库字段冲突要使用转义字符“`order`“,is
|
负载均衡 监控 算法
架构扩展ha-proxy
ha-proxy是一款高性能的负载均衡软件。因为其专注于负载均衡这一些事情,因此与nginx比起来在负载均衡这件事情上做更好。
347 3
|
存储 JavaScript 前端开发
javascript面试题--持续更新 1
javascript面试题--持续更新
130 0
|
分布式计算 Java
Java8流式操作——最终操作
当我们通过最终方法对流对象进行操作,说明stream流操作也完成,最后我们将对象汇总成一个结果(总数、对象、集合……)
|
域名解析 缓存 网络协议
HTTP 的基本优化策略
HTTP 的基本优化策略
170 0
ps2022软件下载安装教程——mac版本全版软件下载安装包教程
ps2022软件下载安装教程——mac版本全版软件下载安装包教程
440 0
|
程序员 Go
Go 函数详解 func 匿名函数 闭包
函数是任何一门编程语言最重要的组成部分之一。函数简单理解是一段代码的封装:把一段逻辑抽象出来封装到一个函数中,给他取个名字,每次需要的时候调用这个函数即可。使用函数能够让代码更清晰,更简洁。
352 0
Go 函数详解 func 匿名函数 闭包