这次文章主要是已实现为主，原理已经有许多大佬的博文了
移动端开发标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">rem原理
通过设置html的fontSzie来实现动态rem，其实就是将页面百分比化
比如：
<html font-size="50px">
<div class="box" width="1.25rem"></div>
</html>html为50px; 可以得到1rem为50px（html被分为100rem）
那么：box的1.25rem宽度就可以得到为(50*1.25)px
@media实现html的fontSize设置
@charset "UTF-8";
@mixin queryWidth($min, $max) {
@if $min == -1 {
@media screen and (max-width: $max+px) {
html {
font-size: ( ($max+1) / 375 ) * 100px;
}
}
} @else if $max == -1 {
@media screen and (min-width: $min+px) {
html {
font-size: ( $min / 375 ) * 100px;
}
}
} @else {
@media screen and (min-width: $min+px) and (max-width: $max+px) {
html {
font-size: ( $min / 375 ) * 100px;
}
}
}
}
@include queryWidth(-1, 319); // for iphone 4
@include queryWidth(320, 359); // for iphone 5
@include queryWidth(360, 374);
@include queryWidth(375, 383); // for iphone 6
@include queryWidth(384, 399);
@include queryWidth(400, 413);
@include queryWidth(414, -1); // for iphone 6 plus纯css实现html的fontSize设置
移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
/* 基于UI width=750px DPR=2的页面 */
html {
font-size: calc(100vw / 7.5);
}jq实现html的fontSize设置（保存大屏幕为100px）
$(window).resize(infinite);
infinite();
function infinite() {
var htmlWidth = $('html').width();
if (htmlWidth >750) {
$("html").css({
"font-size" : "100px"
});
} else {
$("html").css({
"font-size" : 100 / 750 * htmlWidth + "px"
});
}
}
#body标签
width: 7.5rem;阿里flexible实现html的fontSize设置
npm i -S amfe-flexiblevw适配（百分比适配）
配置后直接css写px就会自动解析为vw了
# 安装postcss-px-to-viewport：
npm install postcss-px-to-viewport --save
# postcss.config.js配置：
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，Iphone6的一般是375 （xx/375*100vw）
viewportHeight: 667, // 视窗的高度，Iphone6的一般是667
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}
}
}移动端如何强制页面横屏
有些机型有些app不能横屏：比如Android的微信就没有横屏模式，而ios的微信能开启横屏模式。解决办法就是在竖屏模式下，写一个横屏的div，然后设置rotate正（负）90度，把他旋转过来；而且如果用户切到横屏时，需要把rotate复原，要求也能正常展现。
ios移动端，js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因
在做移动端时间转化为时间戳时，遇到了一个问题，安卓手机上访问时，能拿到时间戳，从而正确转换时间，而在iOS上缺不能正常显示，显示的时间为：NaN-NaN-NaN ，例如getTime()在ios上拿不到时间戳显示NaN
再聊移动端页面的适配
因为对于一枚前端而言，天天和页面打交道（H5页面），那么布局的活总是少不了，这也将面临不同终端的适配问题。不知道你是否和我一样，页面布局总是或多或少会有一些蛋疼的事情发生。
解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案
移动端点透现象的解决办法：解决方案一：来得很直接github上有个fastclick可以完美解决；解决方案二：用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault()，从而阻止click事件的产生；解决方案三：延迟一定的时间(300ms+)来处理事件...
移动端开发注意问题
这篇文章主要总结移动端页面开发时需要注意的一些问题。比如：防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...
js实现移动端微信禁止字体被放大或缩小，防止排版错乱
由于微信webvie内置了调整字体大小的功能，如果用户调整了这一设置，就会导致了网页中的字体比原本的尺寸偏大或偏小，使得网页可能出现排版错乱，或者字体太小看不清的情况发生
阻止移动端浏览器点击图片会预览的几种方法
在移动端部分浏览器中点击了图片，变成了查看图片的效果，怎么防止img的图片被手机浏览器的图片查看器打开呢？下面整理了一些方法来实现：在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式
移动端300ms延迟的解决方法
移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。
移动web开发之视口viewport_浅谈移动端中的视口
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动端则较为复杂，它涉及到三个视口：布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）
手淘H5移动端适配方案flexible源码分析
随着技术的飞速发展，当前lib-flexible适配方案也在逐渐被更新的适配方案所替代，但是截止目前为止，还没有发现哪种方案能完全满足适配各种机型的需要，也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!