浅谈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 方法源码后,觉得还是有必要记下此 ...
随机推荐
- 机器学习 数据挖掘 推荐系统机器学习-Random Forest算法简介
Random Forest是加州大学伯克利分校的Breiman Leo和Adele Cutler于2001年发表的论文中提到的新的机器学习算法,可以用来做分类,聚类,回归,和生存分析,这里只简单介绍该 ...
- h5 meta学习
定义针对搜索引擎的关键词:<meta name="keywords" content="meta,red" /> 定义对页面的描述:<meta ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
- webpack2使用ch2-entry和output简要说明
1 entry打包入口 打包字符串和数组 const webpack = require('webpack'), path = require('path'); module.exports = { ...
- js 浏览器上调试方法多样
1.alert(111) 直接打印出 111 2.debugger 写在代码要调试的地方 3.直接在控制台 source 里找到要调试的代码打断点 4.console 常用的 ...
- Python内置类型(2)——布尔运算
python中bool运算符按优先级顺序分别有or.and.not, 其中or.and为短路运算符 not先对表达式进行真值测试后再取反 not运算符值只有1个表达式,not先对表达式进行真值测试后再 ...
- HashMap实现原理
学习笔记之HashMap篇,简单学习了解HashMap的实现原理和扩容. 大家都知道HashMap处理数据很快,时间复杂度O(1),那么是怎么做到的呢?那就先了解一下常见数据结构. 一般来说,我们把存 ...
- SQL SERVER 根据地图经纬度计算距离函数
前些天客户提出一个这样的要求:一个手机订餐网,查询当前所在位置的5公里范围的酒店,然后客户好去吃饭. 拿到这个请求后,不知道如何下手,静静地想了一下,在酒店的表中增加两个字段,用来存储酒店所在的经度和 ...
- 平板不能设置代理的情况下利用随身wifi进行http代理访问
需求来源:平板或手机是个封闭系统无法给wifi设置代理,需要利用filllder进行抓包,内容篡改等实验 拥有硬件资源:PC机器 + 小米随身wifi 方案1: NtBind Dns + Nginx ...
- Spring MVC 过滤静态资源访问
过滤的必要性 一般来说,HTTP 请求都会被映射到 DispatcherServlet,进而由具体的类来承接处理,但对于类似 js 或者 css 这样的静态资源则没必要这样,因为对资源的获取只需返回资 ...