移动端屏幕适配
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

移动端屏幕适配与响应式的区别
移动端屏幕适配：
移动端
宽高% / rem
字体px
宽高都随着屏幕变化等比例变化
响应式：
PC+移动端
宽%
高、字体：px
宽度等比例变化，高度不变

简单适配方案：
simple.js

    (function() {'use strict';setRemUnit();window.addEventListener('resize', setRemUnit);functionsetRemUnit() {var docEl =document.documentElement;var ratio = 18.75;var viewWidth = docEl.getBoundingClientRect().width ||window.innerWidth;docEl.style.fontSize= viewWidth / ratio + 'px';}})();

通用适配方案：
flexible.js

    (function() {'use strict';//dpr->scale = 1 / dprvar docEl =document.documentElement,viewportEl= document.querySelector('meta[name="viewport"]'),dpr= window.devicePixelRatio || 1,maxWidth= 540,minWidth= 320;dpr= dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);docEl.setAttribute('data-dpr', dpr);docEl.setAttribute('max-width', maxWidth);docEl.setAttribute('min-width', minWidth);var scale = 1 /dpr,content= 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';if(viewportEl) {viewportEl.setAttribute('content', content);}else{viewportEl= document.createElement('meta');viewportEl.setAttribute('name', 'viewport');viewportEl.setAttribute('content', content);document.head.appendChild(viewportEl);}setRemUnit();window.addEventListener('resize', setRemUnit);functionsetRemUnit() {var ratio = 18.75;var viewWidth = docEl.getBoundingClientRect().width ||window.innerWidth;if (maxWidth && (viewWidth / dpr >maxWidth)) {viewWidth= maxWidth *dpr;}else if (minWidth && (viewWidth / dpr <minWidth)) {viewWidth= minWidth *dpr;}docEl.style.fontSize= viewWidth / ratio + 'px';}})();

通用适配案例源码：
预览图

index.html

    <!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><title>通用适配应用</title><linkrel="stylesheet"href="css/base.css"><linkrel="stylesheet"href="css/icons.css"><linkrel="stylesheet"href="css/index.css"><scriptsrc="js/flexible.js"></script></head><body><headerclass="header-container"><divclass="navbar"><divclass="navbar-left"><iclass="iconfont icon-scan"></i></div><divclass="navbar-center"><divclass="searchBox"><divclass="searchBox-prepend"><iclass="iconfont icon-search"></i></div><inputtype="text"class="searchBox-input"placeholder="开学季有礼，好货5折起"><divclass="searchBox-append"><iclass="iconfont icon-close"></i></div></div></div><divclass="navbar-right"><iclass="iconfont icon-msg"></i></div></div></header><divclass="main-container"><divclass="slider-container"><imgsrc="img/slider/1.jpg"alt="slider"></div><navclass="nav-container"><ulclass="nav"><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/1.png"alt="nav"class="nav-img"><spanclass="nav-text">团购</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/2.png"alt="nav"class="nav-img"><spanclass="nav-text">一元购</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/3.png"alt="nav"class="nav-img"><spanclass="nav-text">优惠券</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/4.png"alt="nav"class="nav-img"><spanclass="nav-text">教育</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/5.png"alt="nav"class="nav-img"><spanclass="nav-text">旅行</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/6.png"alt="nav"class="nav-img"><spanclass="nav-text">在线订餐</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/7.png"alt="nav"class="nav-img"><spanclass="nav-text">庆典</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/8.png"alt="nav"class="nav-img"><spanclass="nav-text">秒杀</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/9.png"alt="nav"class="nav-img"><spanclass="nav-text">拍卖</span></a></li><liclass="nav-item"><ahref="###"class="nav-link"><imgsrc="img/nav/10.png"alt="nav"class="nav-img"><spanclass="nav-text">服务</span></a></li></ul></nav><divclass="recommend-container"><ulclass="recommend"><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/1.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">欧派整体橱柜定制简约现代</p><pclass="recommend-origPrice"><del>¥2000.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">1000</strong></span><spanclass="recommend-count">985件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/2.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">创维55吋4K超高清HDR</p><pclass="recommend-origPrice"><del>¥2999.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">2299</strong></span><spanclass="recommend-count">63件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/3.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">【到手259元】苏泊尔 5L电压力锅</p><pclass="recommend-origPrice"><del>¥799.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">299</strong></span><spanclass="recommend-count">1908件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/4.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">三只松鼠坚果礼包</p><pclass="recommend-origPrice"><del>¥125.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">108</strong></span><spanclass="recommend-count">9532件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/5.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">蓝月亮洗衣液12斤</p><pclass="recommend-origPrice"><del>¥133.40</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">89.9</strong></span><spanclass="recommend-count">5399件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/6.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">福临门葵花玉米油</p><pclass="recommend-origPrice"><del>¥109.90</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">89.9</strong></span><spanclass="recommend-count">6294件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/7.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">TP-LINK 全千兆端口双频无线路由器</p><pclass="recommend-origPrice"><del>¥179.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">169</strong></span><spanclass="recommend-count">4255件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/8.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">【前1800名再减50】家用高压洗车机</p><pclass="recommend-origPrice"><del>¥790.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">268</strong></span><spanclass="recommend-count">1599件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/9.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">德国鲁茜rusch迷你婴儿辅食机 宝宝</p><pclass="recommend-origPrice"><del>¥898.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">159</strong></span><spanclass="recommend-count">881件已售</span></p></a></li><liclass="recommend-item"><ahref="###"class="recommend-link"><pclass="recommend-pic"><imgsrc="img/recommend/10.jpg"alt="recommend"class="recommend-img"></p><pclass="recommend-name">西域之尚红枣500g*5袋</p><pclass="recommend-origPrice"><del>¥89.00</del></p><pclass="recommend-info"><spanclass="recommend-price">¥<strongclass="recommend-price-num">29.9</strong></span><spanclass="recommend-count">15049件已售</span></p></a></li></ul></div></div><divclass="tabbar-container"><ulclass="tabbar"><liclass="tabbar-item tabbar-item-active"><ahref="###"class="tabbar-link"><iclass="iconfont icon-home"></i><span>首页</span></a></li><liclass="tabbar-item"><ahref="###"class="tabbar-link"><iclass="iconfont icon-category"></i><span>分类页</span></a></li><liclass="tabbar-item"><ahref="###"class="tabbar-link"><iclass="iconfont icon-cart"></i><span>购物车</span></a></li><liclass="tabbar-item"><ahref="###"class="tabbar-link"><iclass="iconfont icon-personal"></i><span>个人中心</span></a></li></ul></div></body></html>

base.css

*{box-sizing:border-box;padding:0;margin:0;}body{font-size:12px;color:#5d655b;}a{font-size:12px;color:#686868;text-decoration:none;-webkit-tap-highlight-color:transparent;}input{font-size:12px;border:none;background:none;outline:none;}[data-dpr="2"] body,[data-dpr="2"] a,[data-dpr="2"] input{font-size:24px;}[data-dpr="3"] body,[data-dpr="3"] a,[data-dpr="3"] input{font-size:36px;}li{list-style:none;}img{vertical-align:top;border:none;width:100%;}

icons.css

@font-face{font-family:"iconfont";src:url('../fonts/iconfont.eot?t=1522237704791');/*IE9*/src:url('../fonts/iconfont.eot?t=1522237704791#iefix') format('embedded-opentype'),/*IE6-IE8*/url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('../fonts/iconfont.ttf?t=1522237704791') format('truetype'),/*chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('../fonts/iconfont.svg?t=1522237704791#iconfont') format('svg');/*iOS 4.1-*/}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.icon-backtop:before{content:"\e689";}.icon-personal:before{content:"\e610";}.icon-scan:before{content:"\e609";}.icon-clear:before{content:"\e622";}.icon-msg:before{content:"\e7a8";}.icon-category:before{content:"\e7f9";}.icon-search:before{content:"\e616";}.icon-delete:before{content:"\e6ac";}.icon-service:before{content:"\e643";}.icon-setting:before{content:"\e64c";}.icon-back:before{content:"\e60f";}.icon-shop:before{content:"\e624";}.icon-close:before{content:"\e60c";}.icon-more:before{content:"\e85c";}.icon-home:before{content:"\e699";}.icon-collect:before{content:"\e78c";}.icon-cart:before{content:"\e635";}

index.css

    /*-- 布局 start --*/html, body{width:100%;height:100%;}/*header*/.header-container{top:0;background-color:rgba(222, 24, 27, 0.9);}.header-container,.tabbar-container{position:fixed;left:0;z-index:1000;width:100%;height:2.5rem;}/*tabbar*/.tabbar-container{bottom:0;background-color:#fff;box-shadow:0 0 10px 0 rgba(154, 141 ,141, 0.6);}/*main-container*/.main-container{padding:2.5rem 0;background-color:#eee;}/*nav-container*/.nav-container{background-color:#fff;margin-bottom:0.5rem;}/*-- 布局 end --*//*-- 组件 start --*//*navbar*/.navbar{display:flex;height:100%;}.navbar-left,.navbar-center,.navbar-right{display:flex;justify-content:center;align-items:center;height:100%;}.navbar-left,.navbar-right{width:2.2rem;}.navbar-center{flex:1;}.navbar-left .iconfont,.navbar-right .iconfont{color:#fff;font-size:1.2rem;}/*searchBox*/.searchBox{display:flex;width:100%;height:1.6rem;border-radius:0.8rem;background-color:#fff;}.searchBox-prepend,.searchBox-input,.searchBox-append{height:100%;}.searchBox-prepend,.searchBox-append{display:flex;justify-content:center;align-items:center;width:1.6rem;}.searchBox-input{flex:1;}.searchBox .iconfont{color:#ccc;font-size:0.9rem;font-weight:bold;}/*nav*/.nav{display:flex;flex-wrap:wrap;padding:0.8rem 0 0.4rem;}.nav-item{width:20%;margin-bottom:0.4rem;}.nav-link{display:block;text-align:center;}.nav-img{width:2.25rem;height:2.25rem;margin-bottom:0.2rem;}.nav-text{display:block;}.tabbar,.tabbar-item,.tabbar-link{height:100%;}.tabbar{display:flex;}.tabbar-item{width:25%;}.tabbar-link{display:flex;flex-direction:column;justify-content:center;align-items:center;}.tabbar-link .iconfont{font-size:1.2rem;}.tabbar-item-active .tabbar-link{color:#de181b;}/*-- 组件 end --*//*-- 内容 start --*//*recommend*/.recommend{display:flex;flex-wrap:wrap;justify-content:space-between;}.recommend-item{width:49.333333%;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.12);margin-bottom:0.25rem;}.recommend-link{display:block;width:100%;height:100%;}.recommend-pic{width:100%;margin-bottom:0.4rem;}.recommend-img{width:100%;height:9.25rem;}.recommend-name,.recommend-origPrice,.recommend-info{padding:0 0.25rem;margin-bottom:0.4rem;}.recommend-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.recommend-origPrice{color:#ccc;}.recommend-info{display:flex;justify-content:space-between;align-items:center;}.recommend-price{color:#e61414;}.recommend-price-num{font-size:20px;}[data-dpr="2"] .recommend-price-num{font-size:40px;}[data-dpr="3"] .recommend-price-num{font-size:60px;}.recommend-count{color:#999;}/*-- 内容 end --*/

移动端事件
touchstart 进入目标区域
touchmove 在目标区域移动
touchend 离开目标区域

event对象

    <script>var boxEl = document.getElementById('box');boxEl.addEventListener('touchstart', handleStart, false);boxEl.addEventListener('touchmove', handleMove, false);boxEl.addEventListener('touchend', handleEnd, false);functionhandleStart(ev) {console.log('touchstart', ev);console.log(ev.touches, ev.targetTouches, ev.changedTouches);var touch = ev.changedTouches[0];console.log(touch.pageX, touch.pageY);}functionhandleMove(ev) {console.log('touchmove');}functionhandleEnd(ev) {console.log('touchend', ev);}</script>

其他触摸事件
hammer.js自己去官网下哈

    <script src="js/hammer.min.js"></script><script>var boxEl = document.getElementById('box');var hammertime = newHammer(boxEl);hammertime.on('pan swipe tap doubletap press pinch rotate', function(ev) {console.log(ev.type);});</script>

利用hammer做出滑动切换的幻灯片


index.html

<!DOCTYPE html>
<htmllang="zh-CN">
<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>幻灯片的滑动切换</title><linkrel="stylesheet"href="css/slider.css">
</head>
<body><divid="slider"class="slider"><divclass="slider-item-container"><divclass="slider-item"><ahref="###"class="slider-link"><imgsrc="img/1.jpg"alt="slider"class="slider-img"></a></div><divclass="slider-item"><ahref="###"class="slider-link"><imgsrc="img/2.jpg"alt="slider"class="slider-img"></a></div><divclass="slider-item"><ahref="###"class="slider-link"><imgsrc="img/3.jpg"alt="slider"class="slider-img"></a></div><divclass="slider-item"><ahref="###"class="slider-link"><imgsrc="img/4.jpg"alt="slider"class="slider-img"></a></div><divclass="slider-item"><ahref="###"class="slider-link"><imgsrc="img/5.jpg"alt="slider"class="slider-img"></a></div></div></div><scriptsrc="js/hammer.min.js"></script><scriptsrc="js/slider.js"></script><script>varslider= newSlider(document.getElementById('slider'), {initIndex:0,//初始显示第几张幻灯片，从0开始
speed:300,//幻灯片的切换速度
hasIndicator:true //是否需要指示器indicator
});varhammer= newHammer(slider.getItemContainer());varisSwiping= false;hammer.on('panmove',function(ev) {vardistance=ev.deltaX+slider.getDistanceByIndex(slider.getIndex());slider.move(distance);});hammer.on('panend',function(ev) {if(isSwiping)return;vardistance=ev.deltaX+slider.getDistanceByIndex(slider.getIndex());varindex=getIndexByDistance(distance);slider.to(index);});//根据容器移动的距离获取索引functiongetIndexByDistance(distance) {if(distance> 0) {return 0;}else{returnMath.round(-distance/slider.getDistancePerSlide());}}hammer.on('swipeleft',function(ev) {//next
isSwiping= true;slider.next(function() {isSwiping= false;});});hammer.on('swiperight',function(ev) {//prev
isSwiping= true;slider.prev(function() {isSwiping= false;});});</script>
</body>
</html>

slider.css

/*css reset*/*{box-sizing:border-box;padding:0;margin:0;
}img{border:none;vertical-align:top;
}a{-webkit-tap-highlight-color:transparent;
}/*slider*/.slider{overflow:hidden;position:relative;width:100%;height:183px;
}.slider-item-container,
.slider-item,
.slider-link,
.slider-img{width:100%;height:100%;
}.slider-item-container{display:flex;transition:transform 0;
}.slider-item{flex-shrink:0;
}.slider-link{display:block;
}.slider-indicator-container{position:absolute;bottom:10px;width:100%;text-align:center;
}.slider-indicator{display:inline-block;width:8px;height:8px;background-color:#000;opacity:0.2;border-radius:50%;margin-right:8px;
}.slider-indicator-active{background-color:#007aff;opacity:1;
}

slider.js

functionSlider(el, options) {var defaults ={initIndex:0,speed:300,hasIndicator:false};this.options ={};this.options.initIndex = typeof options.initIndex !== 'undefined' ?options.initIndex : defaults.initIndex;this.options.speed = typeof options.speed !== 'undefined' ?options.speed : defaults.speed;this.options.hasIndicator = typeof options.hasIndicator !== 'undefined' ?options.hasIndicator : defaults.hasIndicator;this.el =el;this.itemContainer = el.querySelector('.slider-item-container');this.items = this.itemContainer.children;this.distancePerSlide = this.items[0].offsetWidth;this.minIndex = 0;this.maxIndex = this.items.length - 1;//this.index = this.options.initIndex;this.index = this._adjustIndex(this.options.initIndex);this.move(this.getDistanceByIndex(this.index));if (this.options.hasIndicator) {this._createIndicators();this._setIndicatorActive(this.index);}
}
Slider.prototype.to= function(index, cb) {this.index =index;this._setTransitionSpeed(this.options.speed);this.move(this.getDistanceByIndex(this.index));var self = this;this.itemContainer.addEventListener('transitionend', function() {self._setTransitionSpeed(0);if (typeof cb === 'function') {cb();}},false);if (this.options.hasIndicator) {this._setIndicatorActive(this.index);}
};
Slider.prototype._setTransitionSpeed= function(speed) {this.itemContainer.style.transitionDuration = speed + 'ms';
};
Slider.prototype.prev= function(cb) {this.to(this.index - 1, cb);
};
Slider.prototype.next= function(cb) {this.to(this.index + 1, cb);
};
Slider.prototype._adjustIndex= function(index) {if (index < this.minIndex) {index= this.minIndex;}else if (index > this.maxIndex) {index= this.maxIndex;}returnindex;
};
Slider.prototype.move= function(distance) {this.itemContainer.style.transform = 'translate3d(' + distance + 'px, 0, 0)';
};
Slider.prototype.getDistanceByIndex= function(index) {return -index * this.distancePerSlide;
};
Slider.prototype._createIndicators= function() {var indicatorContainer = document.createElement('div');var html = '';indicatorContainer.className= 'slider-indicator-container';for (var i = 0; i <= this.maxIndex; i++) {html+= '<span class="slider-indicator"></span>';}indicatorContainer.innerHTML=html;this.el.appendChild(indicatorContainer);
};
Slider.prototype._setIndicatorActive= function(index) {this.indicators = this.indicators || this.el.querySelectorAll('.slider-indicator');for (var i = 0; i < this.indicators.length; i++) {this.indicators[i].classList.remove('slider-indicator-active');}this.indicators[index].classList.add('slider-indicator-active');
};Slider.prototype.getItemContainer= function() {return this.itemContainer;
};
Slider.prototype.getIndex= function() {return this.index;
};
Slider.prototype.getDistancePerSlide= function() {return this.distancePerSlide;
};

移动调试和终端检测
移动端检测：

    <script>//切换Android、iPhone、iPad
console.log(navigator.userAgent);var isMobile = navigator.userAgent.match(/android|iphone|ipod|ipad/i);if(isMobile) {location.href= 'https://m.test.com';}else{location.href= 'https://www.test.com';}</script>

移动端常见问题：
浏览器兼容性：
HTML5兼容处理 html5shiv
自己去官网下载哈

    <script src="js/html5shiv.min.js"></script>

不同浏览器前缀：

        display: -webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display: flex;-----------------------<script>var requestAnimationFrame = window.requestAnimationFrame ||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(fn) {setTimeout(fn,16);};requestAnimationFrame(function() {console.log(1);});</script>

modernizr 检测浏览器的css3和HTML5的属性，从而通过CSS来解决兼容性问题
自己去官网下载哈

    <script src="js/modernizr.js"></script>

click 300ms 延迟问题解决：

    <script src="js/fastclick.js"></script><script>if ('addEventListener' indocument) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);},false);}</script>

单行文字溢出省略

.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

多行文字溢出省略

.multiline-ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal !important;word-wrap:break-word;}

水平居中和垂直居中方案：
1 容器宽高自适应 没有指定宽高 内容撑开
　　1-1 内联元素或者内联块元素 不能设置宽高 内容撑开
　　　　1-1-1 文字水平垂直居中 多行文字 用padding撑开

display: inline/inline-block;padding: 30px 20px;

　　1-1-2 容器水平垂直居中 内联元素

left: 50%;top: 50%;transform: translate(-50%, -50%);

　　1-2 块元素 不能设置宽高
　　　　1-2-1 文字水平垂直居中 多行文字

display: block;text-align: center;padding: 30px 0;

　　1-2-2 容器水平垂直居中 块元素

position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);

2 指定容器宽高宽高
　　2-1 内联元素 不能设置宽高 内容撑开

　　2-2 内联块元素 设置宽高
　　　　2-2-1 文字水平垂直居中 多行文字

display: inline-block;width: 300px;height: 100px;text-align: center;line-height: 100px;多行文字display: flex;justify-content: center;align-items: center;

　　 2-2-2 容器水平垂直居中 内联块元素

position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-left: -150px;margin-top: -50px;

2-3 块元素 设置宽高

2-3-1 文字水平垂直居中 多行文字

display: block;width: 300px;height: 100px;text-align: center;line-height: 100px;

2-3-2 容器水平垂直居中 块元素

margin: 0 auto;position: absolute;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px;

多行文字        display: flex;        justify-content: center;        align-items: center;

移动端屏幕适配+事件+常见问题解决相关推荐

  1. 移动端屏幕适配原理以及方法讲解

    序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了 ...

  2. 移动端屏幕适配和css美化浏览器自带的滚动条

    一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...

  3. 超详细的rem+vw移动端屏幕适配方案

    在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...

  4. android 特殊屏幕适配,Android屏幕适配(2)常见:第一种

    前言: Android屏幕适配(1)基础知识篇 Android屏幕适配(3)常见:第二种 Android屏幕适配(4)常见:第三种 Android屏幕适配(5)常见:归纳总结 常见的屏幕配置问题(一些 ...

  5. 从FrozenUI中学习移动端屏幕适配问题

    屏幕适配 Oaker edited this page on 18 Mar 2016.29 revisions 原文链接:https://github.com/frozenui/frozenui/wi ...

  6. @media 移动端屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果.(当然了,他是一个相对单位,以 ...

  7. android 布局覆盖 超出一部分_谈谈移动端屏幕适配的几种方法

    文/腾讯 莫振中 移动端web开发相对于PC端web开发,我们可以庆幸不用兼容那么多浏览器了,但是随之而来的却是各种屏幕尺寸的适配,个人觉得,比PC端还要费精力.在使用了腾讯优测进行软件测试后,问题得 ...

  8. 解决 “数据大屏“ 展示的屏幕适配问题

    现在非常流行的大数据可视化方案,不过要做数据大屏有一个很重要的问题就是屏幕适配. 一.引入flexible文件 flexible是移动端屏幕适配非常著名的的插件,能够帮助我们修改rem的值,也就是修改 ...

  9. 再谈移动端Web屏幕适配

    一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看 ...

最新文章

  1. windows下部署redis
  2. android toast有焦点,android – 如何在显示Toast后进行edittext自动对焦？
  3. P5607-[Ynoi2013]无力回天NOI2017【线性基,线段树,树状数组】
  4. 2021“MINIEYE杯”中国大学生算法设计超级联赛（10）Pty loves string（Border+二维数点）
  5. 启动jboss_3种启动JBoss BPM流程的基本方法
  6. ECharts插件的使用
  7. 进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条
  8. 本质矩阵 基础矩阵 单应矩阵 (3)
  9. 02.环境准备-idea配置maven
  10. Microsoft Visio 2010 简体中文版官方版
  11. 中级软件评测师考什么
  12. 国内身份证号码的正则验证
  13. 开发与研发：区别很大（上）
  14. 每秒订单数25倍提升，蘑菇街怎样跨过海量服务架构的技术藩篱？
  15. dva介绍--Dva概念（二）
  16. java导出excel 【POI 3.17】POI 版本不匹配解决方法
  17. oracle静默创建实例linux,linux CentOS7下快速静默安装Oracle11GR2数据库并创建实例
  18. 西北大环线旅游 7 天、2400 公里的所见所闻
  19. 自动生成实体类、Mapper、Mapper.xml文件
  20. 可控硅过零导通程序--可控硅驱动程序

热门文章

  1. 冷冰冰的，是算法，还是人心
  2. Nova 如何统计 OpenStack 计算资源(free_ram_mb, free_disk_gb)
  3. C# 遍历对象中的属性与值
  4. 谷歌浏览器chrome 在线 离线官方下载地址汇总
  5. MySQL复合索引 in查询,mysql 联合索引 in查询是否生效
  6. CentOS6.8中RabbitMQ的安装和配置俺们这些逗比遇到的坑好难填
  7. python os listdir 命令
  8. es6语法判断字符串是否包含另一个字符串
  9. js读取json文件和读取数据库的速度的差别
  10. DataGrip测试连接时，正在连接到DBMS: MySQL （版本5.7）区分大小写：普通形式=mixed,分隔形式=exact [28000][1045] Access；（知道密码是对的。）