移动端适配简易步骤

手机端全部适配简易步骤,不确保没有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、大功告成,随意切换机型,尽情得瑟吧~

时间: 2024-12-05 11:09:01

移动端适配简易步骤的相关文章

手机平板等移动端适配跳转URL的js代码

 这篇文章主要为大家分享下手机平板等移动端适配跳转URL的js代码,需要的朋友可以参考下 代码如下: <script type="text/javascript"> if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|So

H5移动端适配 Flexible方案_javascript技巧

一.移动端一些概念 视觉稿 (选取一款手机的屏幕宽高作为基准) 在前端开发之前,视觉 MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4 的320×480,现在更多的是iphone6的 375×667). 2)对于retina 屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2 倍,也就是说像素点个数是原来的 4倍(对 iphone6而言:原

java中建立客户端和服务端的思想步骤是如何确立..请大神解答下..

问题描述 java中建立客户端和服务端的思想步骤是如何确立..请大神解答下.. 解决方案 解决方案二: 解决方案三:首先,你得有客户端和服务器端相关的配置信息,我不知道你现在的交互是数据库还是什么??

用Lightroom简易步骤调出电影感色调

  摄影师JP Danko写了一篇教学,让大家可以用简单的方法于LR调出电影感的色调,他说,电影界有一些惯用色调,最常见是画面的阴影带青或绿,而亮部偏向暖色,用PS也能调出一样的色彩,但用LR则可以储存预设.批次调整和微调,非常方便. 下面示范一下他的步骤和设定 1.先打开原照片,然后需要调整一下基本的数值 2.在第二个步骤就已经能够加上冷暖色调,设定如下图 亮部:橙黄 阴影:蓝绿 3.之后到 "HSL/颜色/黑白"这栏,按中间的"颜色"就可以看到以下介面调整画面颜

【原】pageResponse - 让H5适配移动设备全家(移动端适配)

目录(更新于20151013) 原理及说明 github地址 真实案例 contain模式(推荐) cover模式 auto模式(默认模式) 结合fullPage滑屏框架的例子 快速上手   原理及说明 使用transform:scale缩放页面,要求视觉稿高清 页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面 兼容性良好,支持ios4+.android2.3+.winphone8+系统 大小1k,零依赖 三种适配模式可选 auto || contain || cove

手机平板等移动端适配跳转URL的js代码_javascript技巧

复制代码 代码如下: <script type="text/javascript">if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.

Vue2移动端开发环境搭建

本文给出基于 Vue2 的移动端环境搭建,移动端大家更多想到的是响应布局,我们根据不同大小的屏幕进行适配,当然少不了我们的重头戏 rem,移动端相比 pc 端就没什么特别的了. 我会一步一步带领大家进入 Vue2 的世界,拥抱变化,熟悉 Vue 1.x 的根据文档可以迅速掌握 2.0,因为其中大约 90% 的语法是重复的.2.0 更多是基于框架本身的优化,整体设计思想是不变的. vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利

基于Vue2的移动端开发环境搭建详解_javascript技巧

前言 vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧. 一.vue-cli 首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程 全局安装 vue-cli npm install vue-cli -g 借此也全局安装一个 webpack npm install webpa

移动应用交互设计:手机客户端的交互适配方法

文章描述:本文中,我想简单的总结一下手机客户端的交互适配方法,希望能更好地来指导当前移动应用的设计需求. 简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,