移动端--

移动端基础

兼容移动端主流浏览器，处理Webkit内核浏览器即可。

移动端调试方法

• 谷歌浏览器的模拟手机调试
• 搭建本地web服务器，手机和服务器一个区域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

视口

即浏览器显示页面内容的屏幕区域，视口可以分布为布局视口、视觉视口和理想视口。

布局视口

一般移动设备的浏览器都默认设置了一个布局视口，用来解决早期的pc端页面在手机上显示的问题。

iOS、安卓基本都将该视口分辨率设置为980px，故PC网页大部分都可以在手机上显示，只是元素很小需要手动缩放。

视觉视口

指用户正在看到的网站的区域，可以通过缩放操作视觉视口，但是不会影响布局视口（仍保持原来的宽度）。

理想视口

为了使网站在移动端有最理想的浏览和阅读宽度而设定，需要手动添加meta视口标签通知浏览器操作。

meta视口标签是为了使布局视口的宽度与理想视口的宽度一致。

<meta name="viewport" content="width=device-width,user-scalable=no,
inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

标准的viewport设置

 视口宽度与设备保持一致、视口的默认缩放比例为1.0，不允许用户自行缩放，最大/小允许的缩放比例为1.0。 

二倍图

物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，PC端1px等于1物理像素，但移动端并不一定。

1px能显示的物理像素点的个数即为物理像素比。

视网膜屏幕（Retina）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

多倍图

若一张图片在手机视网膜屏中打开，按照一定的像素比被放大会造成图片模糊，为了解决此问题，在标准视图设置中会使用倍图来提高图片质量。

背景缩放background-size

background-size：背景图宽度 背景图高度；（只写一个参数即为宽度，高度等比例缩放）

 

移动端开发选择

移动端主流方案

以单独制作移动端页面为主流，其次为响应式页面兼容移动端。

单独移动端页面：通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备来进行跳转。

响应式兼容PC移动端：通过判断屏幕宽度来改变样式以适应不同的终端，需要调兼容性问题。

移动端技术解决方案

移动端浏览器

基本以webkit内核为主，故需要考虑webkit兼容性问题。浏览器私有前缀只需要考虑添加webkit即可。

css初始化 normalize.css

该初始化方式保护了有价值的默认值，修复了浏览器的bug，是模块化的且拥有详细的文档。

css3盒子模型 box-sizing

box-sizing: border-box;

css设置的宽度里面包含了border和padding，不会撑大盒子。

禁用长按页面时的弹出菜单

-webkit-touch-callout: none;

移动端常见布局

单独制作移动端页面

1、流式布局（百分比布局）

盒子宽度设置成百分比来根据屏幕宽度就像伸缩，常用于移动web开发。

max-width（最大宽度），min-width（最小宽度）保证盒子大小在合理范围之内。

2、flex布局

为盒状模型提供最大的灵活性，任何容器都可以指定为flex布局。

当父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效。

PC端浏览器支持情况较差，兼容性差，IE11或更低版本中不支持或部分支持。

给盒子设置flex特性后，该盒子就具有了主轴和侧轴的概念。主轴用来配置flex项目，默认是水平方向；侧轴与主轴垂直。

 

 常见父项属性

 常见子项属性

• order属性用整数值来定义排列顺序，数值小的排在前面。可以为负值。
• flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，用于指定弹性子元素如何分配空间，比较常见的flex语法是：flex:[number]来表示占多少份数。
• align-self属性用于设置弹性元素自身在侧轴方向上的对齐方式，该属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

3、rem适配布局

less+rem+媒体查询布局

rem是相对于HTML的长度单位（em相对于父元素），可以使页面布局文字大小随屏幕大小的变化而变化，可以非常方便地设置高度（流式布局和flex布局主要针对于宽度布局），可以使屏幕发生变化的时候元素高度和宽度等比例缩放。

媒体查询由一种媒体类型组成，并可以包含一个或多个表达式，这些表达式可以解析为true或false。如果指定的媒体类型与正在显示文档的设备类型匹配并且所有表达式均为true，结果即为true，此时将应用相应的样式表或样式规则。

除非使用not或only运算符，否则媒体类型是可选的，且隐含all类型。

@media not|only mediatype and (expressions){/*css-code*/}

 less是一门css预处理语言，作为css的一种形式拓展，为css加入程序式语言的特性。引入了变量，Mixin(混入），运算以及函数等。

 rem适配方案原理

 flexible.js+rem

原理就是把当前设备划分为10等份，但是在不同设备下比例仍然一致，只需确定好当前设备的html文字大小即可。

响应式页面兼容移动端

响应式布局基于媒体查询来设置屏幕宽度。所以在响应式布局中也可以使用媒体查询。

bootstrap

布局系统

需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类，其提供了两个该作用的类。

栅格系统

随着屏幕或视口尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行与列的组合来创建网页布局，只需将内容放入创建好的布局中即可。

<div class="col-xs-6 col-md-3"></div>//在屏幕划分为12份前提下，超小屏幕时该盒子占据6份，中等屏幕时占据3份
<div class="col-sm-offset-4"></div>//列向右偏移4个列的宽度
<div class="col-md-push-4"></div>//右推
<div class="col-md-pull-4"></div>//左拉
<div class="hidden-sm"></div>//在小屏下隐藏

 栅格系统列嵌套

栅格系统内置的栅格系统将内容再次嵌套（一个列再分成若干小列）。可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

<div class="col-sm-4">
        <div class="row">
            <div class="col-sm-5">小列</div>
            ......
        </div>
</div>