浅谈web移动端适配问题
一、布局方案
目前在解决移动端页面适配问题方案选择上，目前用得比较多是百分比布局，弹性布局flex，rem布局，本文将重点跟大家探讨rem布局。
二、viewport
在介绍rem布局之前，首先跟大家介绍一下viewpoint视口。
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
三个viewport：layout viewport，visual viewport，ideal viewport
layout viewport：即为布局视口，dom宽度，浏览器默认情况下把viewport设为一个较宽的值，比如980px。（document.documentElement.clientWidth）
visual viewport：浏览器可视区域的大小，屏幕宽度。（window. innerWidth）
ideal viewport： 理想适口：使布局视口就是可见视口；
在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
三、js实现rem自动匹配计算font-size
利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值，一下是js代码：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
此代码选640px为基准值，为什么选640呢，
比如当页面中某一div的宽度为60，高度为65的时候，就可以直接这样写样式：
{
width:0.6rem;
height:0.65rem
}
四、使用媒体查询进行适配
一下为sass写法，比如拿到的设计稿是iPhone6，设备宽为375px.设计稿采用的像素是物理像素，二倍屏(retina)750px,所以当计算的时候要除以2.
// REM 适配 <html>
$designWidth:375;
// 375px (iPhone 6)
// 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
html {
font-size:20px;
}
@media (min-width:320px){
html{
font-size: #{20*320PX/$designWidth} !important;
}
}
@media (min-width:360px){
html{
font-size: #{20*360PX/$designWidth} !important;
}
}
@media (min-width:375px){
html{
font-size:#{20*375PX/$designWidth} !important;
}
}
@media (min-width:412px){
html{
font-size: #{20*412PX/$designWidth} !important;
}
}
@media (min-width:480px){
html{
font-size:#{20*480PX/$designWidth} !important;
}
}
@media (min-width:640px){
html{
font-size: #{20*640PX/$designWidth} !important;
}
}
@media (min-width:720px){
html{
font-size:#{20*720PX/$designWidth} !important;
}
}
@media (min-width:768px){
html{
font-size: #{20*768PX/$designWidth} !important;
}
}
@media (min-width:1440px){
html{
font-size:#{20*1440PX/$designWidth} !important;
}
}
为了减少单位换算的时间，加快编写代码的效率，可以采用函数自动换算：
@function torem($px){//$px为需要转换的字号
@return ($px / 40) * 1rem; //40px为根字体大小
}
因为根字体为font-size：20px，设计稿采用2倍像素表示，所以除以20*2;（如果设计稿采用设备像素及跟屏幕尺寸一样的比例，则不用除以2）
比如一个div的在设计稿上的宽度是366px,高度为239px,则直接可以这样写：
div{
width:torem(366);
height:torem(239);
}
四、图片适配问题
当项目不需要对图片要求很高的话可以直接通过宽度适配，假如需要多不同的分辨率要对图片进行更换的话，通过设备像素比实现图片更换。以下是解决办法：
bg-image($url)
background-image url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
background-image url($url + "@3x.png")
最后建议开发中采用百分百币局跟rem布局结合使用，当然flex布局也是可以。
五、具体适配实现要看设计稿给出来的模板而定。分享先到这里。
浅谈web移动端适配问题的更多相关文章
- 浅谈web应用的负载均衡、集群、高可用(HA)解决方案（转）
1.熟悉几个组件 1.1.apache —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安 ...
- 浅谈|WEB 服务器 -- Caddy
浅谈|WEB 服务器 -- Caddy 2018年03月28日 12:38:00 yori_chen 阅读数:1490 标签: caddyserverwebhttps反向代理 更多 个人分类: ser ...
- 【架构】浅谈web网站架构演变过程
浅谈web网站架构演变过程 前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变. 该系统具备的功能: 用户模块:用户注册和管理 商品模块:商品展示和管 ...
- [原创]浅谈Web UI自动化测试
[原创]浅谈Web UI自动化测试 Web UI自动化测试相信大家都不陌生,今天来谈谈这个,我最早接触自动化测试时大约是在2004年,2006年当时在腾讯财付通算是开始正式接触自动化测试,之所以是正式 ...
- Web移动端适配总结
移动端适配的相关概念以及几种方案总结 适配相关概念 布局视口(layout viewport):html元素的上一级容器即顶级容器,用于解决页面在手机上显示的问题.大部分移动设备都将这个视口分辨率设置 ...
- web移动端适配方案
web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...
- 浅谈h5移动端页面的适配问题
一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其 ...
- 浅谈Web自适应
前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难, ...
- 浅谈 Web 中前后端模板引擎的使用
前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...
随机推荐
- ThreadLocal的理解与应用场景分析
对于Java ThreadLocal的理解与应用场景分析 一.对ThreadLocal理解 ThreadLocal提供一个方便的方式,可以根据不同的线程存放一些不同的特征属性,可以方便的在线程中进行存 ...
- S2_SQL_第一章
第一章:数据库的设计 1.1:为什么需要规范数据库的设计 1.1.1:什么是数据库设计 数据库设计就是将数据中的数据实体及这些数据实体之间的关系,进行规范和结构的过程. 1.1.2:数据库设计非常重要 ...
- pycharm（windows）安装及其设置中文菜单
pycharm(windows)安装及其设置中文菜单 1.下载 在官网(http://www.jetbrains.com/pycharm/download/#section=windows)进行下载 ...
- day01:study HTTP协议
总结: 1.对web客户端和web服务器之间的通讯有了基本原理有了简单理解. 2.对http协议有了相关概念的建立 3.B/S C/S 两种形式 4.搭建tomcat服务器的环境,相关配置(虚拟目录 ...
- windows 2008 R2 断电重启进入修复模式
windows 2008 R2 意外断电重启进入修复模式 现在出现一个问题,就是当机房停电的时候,计算机自动进入到修复模式,当人不在机房的时候,容易造成服务器无法访问,我相信正常启动应该没什么问题吧, ...
- System.Object简介
Object中的公共方法解释: 公共方法: Equals: public class Object { public virtual Boolean Equals(Object obj) { //如果 ...
- MVC使用jQuery从视图向控制器传递Model,数据验证,MVC HTML辅助方法小结
//MVC HTML辅助类常用方法记录 (1)@Html.DisplayNameFor(model => model.Title)是显示列名, (2)@Html.DisplayFor(model ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- 浅谈script标签中的async和defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...
- 使用BigQuery分析GitHub上的C＃代码
一年多以前,Google 在GitHub中提供了BigQuery用于查询的GitHub上的开源代码(open source code on GitHub available for querying) ...