浅谈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 方法源码后,觉得还是有必要记下此 ...
随机推荐
- angular学习-01,使用第三方库（jquery...)
开发环境(window) 1.安装node https://nodejs.org/en/ 2.安装angular-cli npm install -g @angular/cli 3.使用ng new ...
- 使用Xshell+Xmanager远程监控jvisualvm
使用jvisualvm的remote方式监控服务器端jvisualvm时,不是很方便,因此通过local方式,应该是正路. 一.服务器端(Linux,最小安装模式,没有图形界面) 1.安装xauth ...
- Zabbix(二) : Zabbix Server端配置文件说明
Zabbix Server端配置文件说明 # This is a configuration file for Zabbix Server process # To get more informat ...
- ORACLE 本地冷迁移
需求:把oracle数据库的数据文件,redo文件,控制文件迁移到本地的其它目录. 1.测试环境: 操作系统redhat 6.3,数据库oracle 11.2.0.1.0 [root@dbtest1 ...
- 多个code.csdn.net账号切换
code.csdn.net是国内开源库 使用git需要在项目添加密钥 而如果有多个账户,一个是私人,一个是公司,那么这时怎么做? 密钥存在~/.ssh默认是id_rsa 那么一个比较笨的办法是做一个k ...
- win10 uwp 绑定密码
win10 下,密码框无法绑定到ViewModel,Password是不可以绑定. 我们可以自己使用简单方法去绑定 我们之前在WPF 使用绑定密码框,我写了一篇,关于如何绑定,我提供一个我自己试了可以 ...
- Java IO流 思维导图
- Oracle学习笔记之游标详解
游标 游标存在意义:解决"select *"返回空.多行记录问题,但凡select,就可能多行结果集,也就需要用游标. 游标分4步走:cursor.open.fetch.close ...
- ThreadPoolExecutor系列<二、ThreadPoolExecutor 代码流程图>
本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7681648.html 1.ThreadPoolExecutor代码 ...
- RabbitMQ 笔记-RPC
RabbitMQ中实现RPC的机制是: 客户端发送请求(消息)时,在消息的属性(MessageProperties,在AMQP协议中定义了14中properties,这些属性会随着消息一起发送)中设置 ...