前情介绍：

中国互联网协会数据统计：用户如果在访问移动端网站时体验不好，3秒内跳出的网站比例大概在61%，5秒内跳出网站的比例大概在85%，而这些跳出的用户中有40%会访问竞争对手的网站，这不仅是公司的损失也是间接的在帮助自己的竞争对手，所以有必要进行良好的网站设计。上一期我们邀请了网页工程师介绍了4种网页设计的技巧，今天我们将接着上一期的内容继续讲余下的部分。

十个Tips设计出合乎人性的手机版网页五、flexbox弹性布局

定义和用法

box-flex 属性规定框的子元素是否可伸缩其尺寸。
提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
默认值：0.0（指示该元素不可伸缩）
继承性：no
版本：CSS3
JavaScript 语法：object.style.boxFlex=2.0

flexbox弹性盒子布局，介兼容性问题，建议使用以下方案：

display : -webkit-flex-box;
-webkit-fiex-box: 1;   //子元素的flex
box-pack : center;
box-center: center;

一种更优雅的方式垂直居中的hack：

更优雅的方式，对高级浏览器来说

// 父元素
position:absolute;
// 子元素
li{
display: table-cell;/*盒模型变成表格的元素*/
vertical-align: middle;
}

十个Tips设计出合乎人性的手机版网页六、响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。这也是目前最主流的移动端网页设计解决方案，我们伟之琦郑州网页设计公司的设计就是使用这种。

语法结构及用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

示例一：在link中使用@media：

上面使用中only可省略，限定计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

示例二：在样式表中内嵌@media：

@media ( min-device-width:1024px ) and ( max-width:989px )，screen and ( max-device-width:480px )，( max-device-width:480px ) and ( orientation:landscape )，( min-device-width:480px ) and ( max-device-width:1024px ) and ( orientation:portrait ) {srules}

在示例二中，设置了电脑显示器分辨率（宽度）大或等1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行地面）放置的手持设备；屏宽大或等480px小1024px以及垂直放置设备的css样式。

从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。

十个Tips设计出合乎人性的手机版网页七、特殊样式处理

安卓手机上点击a标签会有阴影出现，处理的方式为在body和element上加上下面这几句css样式

body{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-moz-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-tap-highlight-color:rgba(0, 0, 0, 0);
-o-tap-highlight-color:rgba(0, 0, 0, 0);
tap-highlight-color:rgba(0, 0, 0, 0);
}
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0);
}

移动端禁止页面缩放

禁止页面把数字当成电话号码

禁止微信浏览器调整页面字体大小

body{
/*禁止微信内置浏览器调整字体大小*/
-webkit-text-size-adjust: 100% !important;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}

禁止用户选中页面文字

body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}

十个Tips设计出合乎人性的手机版网页八、动态改变页面适配

动态的改变页面的viewport来进行适配，个人觉得动态的改变页面的viewport值来进行适配是比较好的解决方案，包括很多大公司都在使用这种方法，这种方法的具体思路是通过js动态的改变页面的viewport来控制页面的显示区域进行适配，一个基jquery的动态改变viewport的插件，通熟易懂，引入完jq再引入这个文件就可以适配了，无需进行别的操作，其它的布局什么的直接按照PC端的来写就可以了，下面来贴出代码：

+function(){
adaptUILayout()
function adaptUILayout(){
var deviceWidth,
devicePixelRatio,
targetDensitydpi,
//meta,
initialContent,
head,
viewport,
ua;
ua = navigator.userAgent.toLowerCase();
//whether it is the iPhone or iPad
isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;
//设置像素比
devicePixelRatio = window.devicePixelRatio;
devicePixelRatio < 1.5 ? 2 : devicePixelRatio;
if(window.orientation == 0 || window.orientation == 180){//ios的横屏，安卓的竖屏
if(window.screen.width < window.screen.height){
deviceWidth = window.screen.width;
}else{
deviceWidth = window.screen.height;
}
}else{//ios的竖屏，安卓的横屏
if(window.screen.width > window.screen.height){
deviceWidth = window.screen.width;
}else{
deviceWidth = window.screen.height;
}
}
//动态的改变像素比
if(devicePixelRatio==2 && (deviceWidth==320 || deviceWidth==360 || deviceWidth==592 || deviceWidth==640)){
deviceWidth*=2;
}
if(devicePixelRatio==1.5 && (deviceWidth==320)){
deviceWidth*=2;
devicePixelRatio = 2;
}
if(devicePixelRatio==1.5 && (deviceWidth==750)){
devicePixelRatio = 2;
}
//设置设备的独立像素比api
targetDensitydpi = 750 / deviceWidth * devicePixelRatio * 160;

创建meta标签

initialContent = isiOS
? 'width=' + 750 + 'px, user-scalable=no, minimal-ui'
: 'target-densitydpi=' + targetDensitydpi + ', width='+ 750 +', user-scalable=no';
$("#viewport").remove();
var head = document.getElementsByTagName('head');
var viewport = document.createElement('meta');
viewport.name = 'viewport';
viewport.id = 'viewport';
viewport.content = initialContent;
head.length > 0 && head[head.length - 1].appendChild(viewport);
}
$(window).bind( 'orientationchange', function(e){
adaptUILayout()
});
}();

十个Tips设计出合乎人性的手机版网页九、跨终端web

① 单域 - Media Query

② 单域 – 多模板

③ 多域 – 跳转（很原始）

④ 多平台 App

（1） 移动优先：

① 移动端的用户和流量越来越多

② 各种屏幕让我们更聚焦业务的本领

③ 移动设备有更先进的人机交互体验

（2） 多终端检测

（3） 接口：结构：通用接口，

接口模型：前端消费者；后端生产者；测试监督者

十个Tips设计出合乎人性的手机版网页十、不要忘记优化

title(页面标题)：

keywords(页面关键词)：

description(页面描述)：

author(网页作者)：

robots(网页搜索引擎索引方式)：robotterms是一组使用逗号(,)分割的值，通常取值：

none：搜索引擎将忽略此网页，等同noindex，nofollow；

noindex：搜索引擎不索引此网页；nofollow：搜索引擎不继续通过此网页的链接索引搜索其它的网页；

all：搜索引擎将索引此网页与继续通过此网页的链接索引，等同index，follow；

index：搜索引擎索引此网页；follow：搜索引擎继续通过此网页的链接索引搜索其它的网页；