移动端H5适配方法（盒子+图片+文字）
一.怎么让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的值。
方法三：百分比+弹性盒布局
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适配方法（盒子+图片+文字）的更多相关文章
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
- 移动端 h5 适配之必知必会
建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金: ...
- CSS3——PC以及移动端页面适配方法（流体布局）
流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...
- 移动端h5调试方法
charles代理 使用技巧如下: http://www.jianshu.com/p/fdd7c681929c 1.手机wifi连接代理 以iphone为例,长按住wifi, 进入下一页,可看到 HT ...
- 移动端H5适配流程
(一) 由于手机生产商越来越多,不同手机的硬件尺寸又不尽相同,这就给我们的设计适配造成很大困扰.但我们可以围绕从基准分辨率设计,上下进行兼容适配的原则来进行快捷操作.以IOS阵营为例: 图注:移动适配 ...
- CSS3——PC以及移动端页面适配方法（响应布局）
响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度. <!DOCTYPE html> <html lang="en" ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 解惑好文：移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
随机推荐
- H2内存数据库支持存储到文件
准备工作 1.下载JDK(本人下载的版本为JDK1.7).设置环境变量JAVA_HOME,设置PATH(%JAVA_HOME%\bin%). 2.下载并解压:h2-2014-07-13.zip 官网下 ...
- 摘抄-----java codeReview要做的事
整洁的代码 清单项目 分类 使用可以表达实际意图(Intention-Revealing)的名称 有意义的名称 每一个概念只用一个词 有意义的名称 使用方案/问题领域名称 有意义的名称 类应该是比较小 ...
- 解决 Eclipse Indigo 3.7、ADT 中文字体偏小，完美 Consolas 微软雅黑混合字体！
Eclipse是著名的跨平台的自由集成开发环境(IDE).6月22日Eclipse 3.7 正式发布,代号是 Indigo . 在 Windows 7 下初始后化,发现界面变化不大,但中文字体却面目全 ...
- Emmet常用语法
Emmet常用语法1.输入!和html:5(不能大写),按下TAB 键,快速生成一个 HTML5 的标准文档初始结构. html:xt 生成 HTML4 过渡型 html:4s 生成 HTML4 严格 ...
- Spring Boot 2 实践记录之 组合注解原理
Spring 的组合注解功能,网上有很多文章介绍,不过都是介绍其使用方法,鲜有其原理解析. 组合注解并非 Java 的原生能力.就是说,想通过用「注解A」来注解「注解B」,再用「注解B」 来注解 C( ...
- SQL Server 维护计划（数据库备份）
公司的项目都需要定期备份,程序备份关掉iis站点复制文件就可以了,难受的地方就是数据库的备份了.服务器上装的大都是英文版,一看见英文,操作都变得小心翼翼起来,生怕哪里搞错,第二天就要被安排写辞职申请了 ...
- MS SQL 分页存储过程
最近换了家新公司,但是新公司没有使用分页的存储过程.那我就自个写一个往项目上套 (效率怎么样就不怎么清楚没有详细的测试过) CREATE PROCEDURE [dbo].[pro_common_pag ...
- Office - Outlook
将邮件存到本地 服务器容量有限,避免丢失和经常提示容量不足 步骤 在File->Account Settings->Account Settings下面 在Data Files标签页新建一 ...
- (php)实现万年历
<?php //修改页面编码 header("content-type:text/html;charset=utf-8"); //获取当前年 $year=$_GET['y'] ...
- UWP开发---嵌套DataTemplate&模板选择器
对于Json结构体items不完全一致的情况下,在UWP平台是如何处理数据,并通过不同的模板选择,进行显示呢? 一,嵌套Json分析 1,结构 通过抓取index的API(点击请求API)获取到的js ...