一. 怎么让 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 的大小决定. 在页面载入开始时首先判断 Windows 的宽度 (是 Windows 的宽度 ($(Windows).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";
- };
- })(Windows, 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 换算直接 / 50 即可得到 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 适配方法就这些了, 如果有人有更好的解决办法, 欢迎在下方留言或者留下你的博客地址, 觉得博主博客写的至少入眼的, 欢迎点个关注, 博客时刻更新中, 一起学习一起进步.
来源: https://www.cnblogs.com/hejun26/p/10071433.html