移动端页面适配解决方案
一、流体布局
所谓的流体布局,就是用百分比来定义宽度,最外层容器的宽度设置为100%,就可以适配不同的屏幕,子元素按照比例来设置百分比,子元素整体的百分比之和就是100%,但是如果有子元素设置了边框,或者padding,那么整体的宽度就会大于100%,这时,我们可以将盒子的尺寸计算方式设置为从边框计算,通过设置:box-sizing:border-box,此时,盒子设置的宽度就是盒子的实际宽度,就没有这个问题了。
宽度解决了,高度如何设置呢?一般的元素,高度可以固定不变,所以在屏幕变化时,我们可以看到元素的宽度变了,高度不变,但是对于图片,如果高度不同,图片就会被拉扁,此时我们可以将图片的宽度设为100%;它的宽度就由它的父级的宽度决定,图片的高度不设置,图片就会按照宽度变化等比例放大或缩小,这是图片的特性,这样就可以做到图片的适配了。
示例如下:
* {box-sizing: border-box;}.wrap {overflow: hidden;}.banner {overflow: hidden;}.banner img {width: 100%;}.l_con {width:33.333333%;height:50px;float: left;}.c_con {width:33.333333%;height:50px;float: left;}.r_con {width:33.333333%;height:50px;float: left;}
二、响应式布局
响应式布局,就是使用媒体查询的方式,针对不同的屏幕,对应不同的样式,但是移动端的屏幕很多种,如果要对应这么多套不同的样式,这样做也不现实,所以针对移动端,可以划分出三个屏幕宽度范围,在范围之内的,就使用同一套样式,这样定义三套样式就可以了,宽度的区间可以参照苹果手机的分辨率:374px以下为第一个区间,375px到413px为第二个区间,414px以上为第三个区间,按照这个三个区间定义三套样式,在苹果手机上可以做到很好的适配,但对于一些其他分辨率的手机,可能会有一些不太适配的细节,但是这三套,应该基本上是适用了。
示例如下:
/* 最小尺寸样式 */... ... /* 大于等于 375px 尺寸样式 */@media screen and (min-width: 375px){... ...}/*大于等于 414px 尺寸样式*/@media screen and (min-width: 414px){... ...}
三、弹性盒子布局模型
弹性盒子布局模型是一个新增的CSS 布局模块,它带有流体布局和响应式布局的一些特性,而且它用少量的属性可以实现了多个元素的对齐方式,分布以及顺序等问题,用它能快捷高效的实现适配多终端的布局,这种模块简称为 flexbox,flexbox布局模块的先后有三个版本,前两个版本的一些属性在最新的浏览器上已经得不到支持了,第三个版本在最新的浏览器上已得到广泛的支持。
Flexbox布局模块是CSS3新增的一些属性,这些属性分为容器属性和条目属性,容器和条目是这种模块里面的概念,指的其实就是父元素和子元素。父元素通过设置display:flex来声明flexbox模块、通过flex-flow来设置子元素排列方式、通过justify-content来设置元素的分布方式等等。而子元素通过flex属性来设置伸长或缩小比例、通过order来设置它在容器中的顺序等等。
示例如下:
.menu {max-width: 800px;height: 40px;margin: 0 auto;display: flex;justify-content: flex-start;align-items: center; }.menu li {flex: 1; }
四、基于rem的布局
rem是CSS3新增的一个单位,相对于em单位,rem的单位设置更加简单,它是相对于根元素的的字体大小,其他的元素如果用rem来设置单位,它们对应的基准就是一样的,这样,在移动端适配中,除了html元素,其他元素的宽、高、行高、背景定位等等都用rem来设置,我们设定一个宽度作为基准,比如320px,然后按照这个基准,按比例来调节不同屏幕上对应的html元素的字体大小,就可以同步改变其他所有元素的用rem设置的尺寸的大小,这样就可以做到真正的按比例适配,不像流体布局,只能改变宽度,这种方式直接,高效,目前广泛应用在移动端布局中。
动态改变html标签文字大小的JavaScript如下:
(function () {let calc = function () {let docElement = document.documentElement;let clientWidthValue = docElement.clientWidth > 640 ? 640 : docElement.clientWidth;docElement.style.fontSize = 20 * (clientWidthValue / 320) + 'px';}calc();window.addEventListener('resize', calc); })()
css 代码设置如下:
.search{position: absolute;right:0.725rem;top:0.625rem;width:1.35rem;height:1.35rem;backgrond:url(../images/icons.png) left -31.97rem;-webkit-background-size: 2.9rem 33.5rem;background-size: 2.9rem 33.5rem; }
在实际开发中,我们可以根据实际需要,选择适合的适配方式。
本文原出处:http://pcedu.pconline.com.cn/1024/10241144.html
转载于:https://www.cnblogs.com/Sky-Ice/p/9592232.html
移动端页面适配解决方案相关推荐
- 移动端页面自适应解决方案—rem布局
移动端页面自适应解决方案-rem布局 参考文章: (1)移动端页面自适应解决方案-rem布局 (2)https://www.cnblogs.com/Vayne-N/p/6903590.html 备忘一 ...
- python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
- 【Vue】Vue移动端页面自适应解决方案
移动端页面自适应解决方案 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewpo ...
- 移动端页面适配———多方案解析
移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一款的新机型.对于移动端适配,不同的公司.不同的团队有不同的解决方案.我在项目中也用了一部 ...
- 移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...
- 2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境
1.开始 在flexible的GitHub上面写着 由于 viewport 单位得到众多浏览器的兼容, lib-flexible 这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一 ...
- h5 rem vue_vue移动端h5适配解决方案(rem or vw)
方案一:amfe-flexible+px2rem-loader amfe-flexible:根据设备宽度,修改根元素html的大小,以适配不同终端 px2rem-loader:将css中的px转为re ...
- pc端rem适配_聊聊PC端页面适配
目前pc并没有像移动端那样,可以用rem单位这种一站式解决方案,因为pc需要考虑低级浏览器,媒体查询和background-size这些新属性都不能用. 设计稿:1920/(1080-190) = 2 ...
- 一段代码把PC端页面适配手机端
在PC端的代码中加入这段代码,及实现手机端页面的自适应,是个人目前觉得最好用的方法! <script type="text/javascript"> ...
最新文章
- Lync 小技巧-24-PDF 加密文件-转-Word-操作手册
- proc文件系统概述
- EasyCriteria –使用JPA Criteria的简便方法
- VS2010 TFS
- Android 系统(238)---查看日志
- 32位汇编寄存器含义解释
- [转载] 了解Node.js-to-Angular 套件组件
- unity3d多个版本共存
- solidity 0.5.7简明教程
- leetcode 14天算法入门 C语言实现
- 新版UNITY游戏(IL2CPP类型)使用内嵌型机器翻译插件XUnity.AutoTranslator的食用方法
- 如何把自己打造成技术圈的papi酱
- Picture Flash(图片放映)
- PRBS-存储器测试
- 便利贴--9{Cesium+js绘制多个点和多个线的图层,加标题}
- win10高性能模式
- Launcher3 桌面加载流程分析
- 渗透测试工程师都需要什么工具呢?网络安全(三)
- 【SQL】SQL安装卸载问题的解决。SQL简直剧毒无比好吧。。。
- JavaSwing+MySQL+进销存管理系统