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

a.利用meta标签

  1. <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，用户不可扩展，页面不可缩放。

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

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

  1. <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像素为基准:

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

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

  1. @media screen and (min-width:320px) and (max-width:359px) and (orientation:portrait) {
  2.     html { font-size: 625%; }
  3. }
  4. @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
  5.     html { font-size: 703%; }
  6. }
  7. @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
  8.     html { font-size: 732.4%; }
  9. }
  10. @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
  11.     html { font-size: 750%; }
  12. }
  13. @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
  14.     html { font-size: 781.25%; }
  15. }
  16. @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
  17.     html { font-size: 808.6%; }
  18. }
  19. @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
  20.     html { font-size: 843.75%; }
  21. }

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <meta name="apple-mobile-web-app-capable" content="yes">
  7.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8.         <title>rem字体大小自适应</title>
  9.         <link rel="stylesheet" href="css/reset.css" type="text/css"><!--此处是我全局css代码，清除默认样式，无影响-->
  10.         <style>
  11.  
  12.         .ending_box{
  13.             position: absolute;
  14.             top:0;
  15.             left: 0;
  16.             width: 100%;
  17.             height: 100%;
  18.         }
  19.         .ending_con{
  20.             position: absolute;
  21.             top: 50%;
  22.             left: 50%;
  23.             width: 5rem;
  24.             height: 6rem;
  25.             margin-left: -2.5rem;
  26.             margin-top: -3rem;
  27.         }
  28.         .ending_con .ending_img{
  29.             margin: 0 auto;
  30.         }
  31.         .ending_con .ending_img img{
  32.             width: 100%;
  33.         }
  34.         .ending_con .ending_txt{
  35.             text-align: center;
  36.             line-height: 0.6rem;
  37.             font-size: 0.32rem;
  38.             color:#333;
  39.             margin-top: 0.5rem;
  40.             letter-spacing: 2px;
  41.         }
  42.  
  43.         </style>
  44.         <script>
  45.  
  46.         (function(win, designW) {
  47.             var doc = win.document;
  48.             var docEle = doc.documentElement;
  49.             designW = designW || 640; //设计稿宽度px,默认640px设计稿
  50.             var ratio = designW / 100;//640px=> 1rem = 100px, 超出640px font-size：100px;
  51.             var or = "orientationchange" in win ? "orientationchange" : "resize";
  52.             //创建viewport
  53.             _createViewport();
  54.             if(doc.addEventListener){
  55.                 win.addEventListener(or, _refreshRem, false);
  56.                 doc.addEventListener("DOMContentLoaded", _refreshRem, false);
  57.             }
  58.             /**
  59.              * 创建viewport
  60.              */
  61.             function _createViewport(){
  62.                 var metaEl = doc.createElement('meta');
  63.                 metaEl.setAttribute('name', 'viewport');
  64.                 metaEl.setAttribute('content', 'initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
  65.                 if (docEle.firstElementChild) {
  66.                     docEle.firstElementChild.appendChild(metaEl);
  67.                 }
  68.  
  69.             }
  70.             /**
  71.              * 动态更新rem
  72.              */
  73.             function _refreshRem() {
  74.                 var clientW = docEle.clientWidth || 320;
  75.                 //设置最大和最小宽度取值
  76.                 if(clientW > designW){
  77.                     clientW = designW
  78.                 } else if(clientW<320){
  79.                     clientW=320;
  80.                 }
  81.                 docEle.style.fontSize = clientW / ratio + "px";
  82.             };
  83.         })(window, 750);//750为设计稿宽度px值,根据实际设计稿大小对应设置
  84.  
  85.         </script>
  86.     </head>
  87.     <body>
  88.         <div class="ending_box" q-ctrl="endingCtrl">
  89.              <div class="ending_con">
  90.                     <p class="ending_img">
  91.                            <img src="https://www.cnblogs.com/images/cnblogs_com/hejun26/1310858/o_longmao.jpg"/>
  92.                     </p>
  93.                     <p class="ending_txt">这里是测试的图片和文字,请切换屏幕大小查看效果！</p>
  94.              </div>
  95.         </div>
  96.     </body>
  97. </html>

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

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

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

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

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

  1. nowrap（默认值）：默认不换行。
  2. wrap：换行，第二行在第一行下面，从左到右
  3. wrap-reverse：换行，第二行在第一行上面，从左到右；

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

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

  1. flex-start（默认值）：左对齐
  2. flex-end：右对齐
  3. center： 居中
  4. space-between：两端对齐，项目之间的间隔都相等。
  5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

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

  1. flex-start：交叉轴的起点对齐。
  2. flex-end：交叉轴的终点对齐。
  3. center：交叉轴的中点对齐。
  4. baseline: 项目的第一行文字的基线对齐。
  5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

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

  1. flex-start：与交叉轴的起点对齐。
  2. flex-end：与交叉轴的终点对齐。
  3. center：与交叉轴的中点对齐。
  4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  6. stretch（默认值）：轴线占满整个交叉轴。

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

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

  1. 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. 译：Microsoft/ReactXP 简介

    在Github的Microsoft项目中发现一个名为ReactXP的项目,这是一个由Skype团队开发的,用于进行Web及跨平台APP开发的库(建立在React Js 和 ReactNative之上) ...

  2. 构建NetCore应用框架之实战篇（四）：BitAdminCore框架1.0登录功能细化及技术选型

    本篇承接上篇内容,如果你不小心点击进来,建议从第一篇开始完整阅读,文章内容继承性连贯性. 构建NetCore应用框架之实战篇系列 一.BitAdminCore框架1.0版本 1.1.0版本是指最小版本 ...

  3. winform npoi excel 样式设置

    IWorkbook excel = new HSSFWorkbook();//创建.xls文件 ISheet sheet = excel.CreateSheet("sheet1") ...

  4. MySQL(ORM框架)

    day63 参考:http://www.cnblogs.com/wupeiqi/articles/5713330.html SQLAlchemy本身无法操作数据库,其必须以来pymsql等第三方插件, ...

  5. 基于Spring Boot的Logback日志轮转配置

    在生产环境下,日志是最好的问题调试和跟踪方法,因此日志的地位是十分重要的.我们平时经常使用的log4j,slf4j,logback等等,他们的配置上大同小异.这里就结合Spring Boot配置一下L ...

  6. 转载：在spring中嵌入activemq

    转载:http://www.dev26.com/blog/article/137 web开发站中的邮件发送使用了activemq我这是从网上找的进行了一些修改,记录下来,为了避免发送邮件时程序对用户操 ...

  7. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  8. linux对文件赋权限的命令chmod的详细说明

    指令名称 : chmod使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案调 ...

  9. 利用Django和装饰器做一个简单的修改密码页面

    view视图代码: from django.shortcuts import render,redirect from django.http import HttpResponse from PIL ...

  10. 【learning】微信跳一跳辅助c++详解 轻松上万 【下】

    如果你还没有看完本blog的上篇,建议您先看完上篇!! 第一代辅助如何死的? 我们先来看四张图      如上方最左图所示,前面是一个小圆柱子,看起来很人畜无害似不似?? 由于上一步跳出了偏差,并没有 ...