浅谈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 方法源码后,觉得还是有必要记下此 ...
随机推荐
- You Are the One DP
You Are the One Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Sub ...
- ZOJ3541 The Last Puzzle
这道题是宁波集训的那道题,讲课时轻描淡写吧(应该是我听课不认真罢了),所以这样就要靠自己的理解了, dp[i][j][0]表示从左端点开始完成整个区间的最小花费dp[i][j][1]表示从右端点开始完 ...
- 【转】Python正则表达式指南
1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...
- wxPython中菜单、按钮学习
---恢复内容开始--- wx.Window 是一个基类,许多构件从它继承.包括 wx.Frame 构件.技术上这意味着,我们可以在所有的 子类中使用 wx.Window 的方法.我们这里介绍它的几种 ...
- DotNetCore跨平台~配置文件与配置代码如何共存
回到目录 古人云<一山不容二虎>,而进行dotnet core时代之后,我们可以看到这样的一些官方的DEMO,它将数据连接串和其它配置项都直接硬编码在代码里,即在startup中进行定义, ...
- Echarts数据可视化dataZoom，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- android6.0 SerialPort 服务
上一篇博客描述了一个简单的串口应用程序和驱动程序,了解了应用程序访问串口的基本操作,如打开串口,设置串口,写串口,读串口,关闭串口等.和Linux串口驱动的基本框架.这里将了解Android下的串口系 ...
- UWP上可用的GB2312编码
大概是在WP8的时候,网上有一个WP8可用的GB2312编码的解决方法,就是那个DBCSCodePage. 但是由于UAP开始,微软删掉了GetManifestResourceStream,所以这东西 ...
- vue——实例方法 / 数据
目录 1.vm.$set 2.vm.$watch 3.vm.$delete 1.vm.$set 哎呀呀,周五啦,大家应该都很开心吧,放假了可以好好休息休息啦,然而小颖明天要面试,所以小颖今天就回去放了 ...
- Python读取SQLite文件数据
近日在做项目时,意外听说有一种SQLite的数据库,相比自己之前使用的SQL Service甚是轻便,在对数据完整性.并发性要求不高的场景下可以尝试! 1.SQLite简介: SQLite是一个进程内 ...