一.怎么让H5页面适应手机

a.利用meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。

<meta name="apple-mobile-web-app-capable" content="yes">

解释：添加到主屏幕后，全屏显示。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

解释：作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

b.百分比法

CSS中的百分比中指的是相对于父元素的宽度。子元素盒子width最好使用百分比来写，能最大可能的适应各种屏幕，但这只适合布局简单的页面，复杂的页面实现很困难。

c.使用css3的单位rem

rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者差别请自行查阅），然后计算得出换算比例，等下下方会贴出相应的计算代码。

二.自适应动态设置html

例如以屏幕320像素为基准:

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

方法1：使用媒体查询换算出各分辨率的比例

@media screen and (min-width:320px) and (max-width:359px) and (orientation:portrait) {

    html { font-size: 625%; }

}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {

    html { font-size: 703%; }

}

@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {

    html { font-size: 732.4%; }

}

@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {

    html { font-size: 750%; }

}

@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {

    html { font-size: 781.25%; }

}

@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){

    html { font-size: 808.6%; }

}

@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){

    html { font-size: 843.75%; }

}

然后，设计稿px换算直接/100即可得到rem值。然而，这种方法初略计算大致的范围，只能解决一部分的情况，并不能完全适配，不建议使用；

方法二：根据屏幕分辨率来换算比例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <title>rem字体大小自适应</title>

        <link rel="stylesheet" href="css/reset.css" type="text/css"><!--此处是我全局css代码，清除默认样式，无影响-->

        <style>

        .ending_box{

            position: absolute;

            top:0;

            left: 0;

            width: 100%;

            height: 100%;

        }

        .ending_con{

            position: absolute;

            top: 50%;

            left: 50%;

            width: 5rem;

            height: 6rem;

            margin-left: -2.5rem;

            margin-top: -3rem;

        }

        .ending_con .ending_img{

            margin: 0 auto;

        }

        .ending_con .ending_img img{

            width: 100%;

        }

        .ending_con .ending_txt{

            text-align: center;

            line-height: 0.6rem;

            font-size: 0.32rem;

            color:#333;

            margin-top: 0.5rem;

            letter-spacing: 2px;

        }

        </style>

        <script>

        (function(win, designW) {

            var doc = win.document;

            var docEle = doc.documentElement;

            designW = designW || 640; //设计稿宽度px,默认640px设计稿

            var ratio = designW / 100;//640px=> 1rem = 100px, 超出640px font-size：100px;

            var or = "orientationchange" in win ? "orientationchange" : "resize";

            //创建viewport

            _createViewport();

            if(doc.addEventListener){

                win.addEventListener(or, _refreshRem, false);

                doc.addEventListener("DOMContentLoaded", _refreshRem, false);

            }

            /**

             * 创建viewport

             */

            function _createViewport(){

                var metaEl = doc.createElement('meta');

                metaEl.setAttribute('name', 'viewport');

                metaEl.setAttribute('content', 'initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');

                if (docEle.firstElementChild) {

                    docEle.firstElementChild.appendChild(metaEl);

                }

            }

            /**

             * 动态更新rem

             */

            function _refreshRem() {

                var clientW = docEle.clientWidth || 320;

                //设置最大和最小宽度取值

                if(clientW > designW){

                    clientW = designW

                } else if(clientW<320){

                    clientW=320;

                }

                docEle.style.fontSize = clientW / ratio + "px";

            };

        })(window, 750);//750为设计稿宽度px值,根据实际设计稿大小对应设置

        </script>

    </head>

    <body>

        <div class="ending_box" q-ctrl="endingCtrl">

             <div class="ending_con">

                    <p class="ending_img">

                           <img src="https://www.cnblogs.com/images/cnblogs_com/hejun26/1310858/o_longmao.jpg"/>

                    </p>

                    <p class="ending_txt">这里是测试的图片和文字,请切换屏幕大小查看效果！</p>

             </div>

        </div>

    </body>

</html>

然后按照750的设计稿，设计稿px换算直接/100即可得到rem值。

注：后期发现一个编写错误，设计稿px/100得出我们的rem的值。

方法三：百分比+弹性盒布局

不管是用哪种布局我都习惯性用弹性盒布局，display:flex,我觉得相当的美好，不用一点点的去量宽度，而且可以替换浮动，也不用清除浮动，不管是PC还是移动都是不错的，有时候懒得用rem我就是用百分比+弹性盒，但是，各位请注意，兼容性问题考虑一下，弹性盒的集中兼容写法注意一下，手机端感觉是各种通用的，浏览器兼容一般，主流OK的，但是IE10以下估计完蛋。
 
a.有6个属性作用在父盒子box上，对子盒子起作用
 
1. flex-direction 决定主轴的对齐方向，分别有四个属性：   
row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2.  flex-wrap ：定义子元素超过一行，如何换行，分别有三个属性：

nowrap（默认值）：默认不换行。

wrap：换行，第二行在第一行下面，从左到右

wrap-reverse：换行，第二行在第一行上面，从左到右；

3. flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row  nowrap：

4. justify-content:  子元素在主轴对齐方式：

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.  align-items：交叉轴如何对齐，如果flex-direction：row和row-reverse  那么交叉轴就是y轴，如果是column和column-reverse那么交叉轴是x轴：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用：

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

b.有一个常用的属性作用在子盒子上

1.flex-grow  放大比例  默认是0   当有放大空间的时候，值越大，放大的比例越大：

flex-grow: 1;

总结：博主所知道的移动端H5适配方法就这些了，如果有人有更好的解决办法，欢迎在下方留言或者留下你的博客地址，觉得博主博客写的至少入眼的，欢迎点个关注，博客时刻更新中，一起学习一起进步。

移动端H5适配方法（盒子+图片+文字）的更多相关文章

  1. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

  2. 移动端 h5 适配之必知必会

    建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金: ...

  3. CSS3——PC以及移动端页面适配方法（流体布局）

    流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...

  4. 移动端h5调试方法

    charles代理 使用技巧如下: http://www.jianshu.com/p/fdd7c681929c 1.手机wifi连接代理 以iphone为例,长按住wifi, 进入下一页,可看到 HT ...

  5. 移动端H5适配流程

    (一) 由于手机生产商越来越多,不同手机的硬件尺寸又不尽相同,这就给我们的设计适配造成很大困扰.但我们可以围绕从基准分辨率设计,上下进行兼容适配的原则来进行快捷操作.以IOS阵营为例: 图注:移动适配 ...

  6. CSS3——PC以及移动端页面适配方法（响应布局）

    响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. 解惑好文：移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  9. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

随机推荐

  1. VS2012 中不能安装ARCGIS 10.0 SDK的解决方法

    问题描述 在ARCGIS 安装SDK时 就会出错   原因是ARCGIS SDK 10.0只能在VS2010中安装,因为我本机是安的VS2012所以安装不成功.     解决方法 一,在注册表中HKE ...

  2. WPF Out Of Memory

    起因 程序发布后,运行突然奔溃报Out of Memory,查看日志发现如下类似错误(以下堆栈信息来之网络): System.OutOfMemoryException: Insufficient me ...

  3. Sql 辅助

    1.清空数据表 SELECT 'TRUNCATE TABLE '+name AS TruncateSql FROM sys.tables

  4. Ruby on Rails 目录结构

    目录结构 + app/ #控制器.模型.视图.帮助方法.邮件.静态资源 + bin/ #rails脚本 + config/ #路由.数据库等 + db/ #数据库模式.迁移文件 + lib/ #扩展模 ...

  5. easyui-layout系列之表单一（2）

    表单在我们的开发过程非常的常见,easyUI给我们提供了非常方便快捷的表单开发工具,使用熟练可以大大的提高后台开发速度,非常有必要熟练掌握. 1.Textbox-文本框 扩展自$.fn.validat ...

  6. linux ab压力测试工具及ab命令详解

    原文链接:https://blog.csdn.net/qq_27517377/article/details/78794409 yum -y install httpd-tools ab -v 查看a ...

  7. perl(ExtUtils::Embed)依赖包

       perl(ExtUtils::Embed) 被 ****需要    yum install perl-ExtUtils-Embed即可

  8. python 带参与不带参装饰器的使用与流程分析/什么是装饰器/装饰器使用注意事项

    一.什么是装饰器 装饰器是用来给函数动态的添加功能的一种技术,属于一种语法糖.通俗一点讲就是:在不会影响原有函数的功能基础上,在原有函数的执行过程中额外的添加上另外一段处理逻辑 二.装饰器功能实现的技 ...

  9. poj1017----模拟

    题目大意: 现有1*1,2*2,3*3,4*4,5*5,6*6规格的产品若干个(高度都为h),问最少需要多少个 6*6*h的箱子把这些产品都装完 输入:每组测试数据共6个整数,分别代表1*1,...6 ...

  10. 三，mysql优化--sql语句优化之索引一

    1,需求:如何在一个项目中,找到慢查询的select,mysql数据库支持把慢查询语句,记录到日志中.供程序员分析.(默认不启用此功能,需要手动启用) 修改my.cnf文件(有些地方是my.ini) ...