移动端页面开发
一、移动端与PC端页面布局区别
1.1 视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
设置方法如下( 快捷方式：meta:vp + tab )：
<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>
pc端与移动端渲染网页过程：
1.2 视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。
清晰度解决过程示意图：
背景图强制改变大小，可以使用background新属性
background新属性
background-size:
- length：用长度值指定背景图像大小。不允许负值。
- percentage：用百分比指定背景图像大小。不允许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
二、适配布局类型
2.1 PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：响应式布局+流体布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局
2.2 流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
2.3 响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
相应布局的伪代码如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
2.4 基于rem的布局
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
me Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", “.less”, “.sass”]。
三、移动段库和框架
3.1 移动端js事件
移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：
1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用
移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。
3.2 zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。
zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/
3.3 swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。
2.x版本中文网址：http://2.swiper.com.cn/
3.x版本中文网地址：http://www.swiper.com.cn/
swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script>
<!--
如果页面引用了jquery或者zepto，就引用 swiper.jquery.min.js,它的容量比swiper.min.js
<script src="path/to/swiper.jquery.min.js"></script>
-->
......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
initialSlide :1,
paginationClickable: true,
loop: true,
autoplay:3000,
autoplayDisableOnInteraction:false
});
</script>
swiper使用参数：
1、initialSlide：初始索引值，从0开始
2、direction：滑动方向 horizontal | vertical
3、speed：滑动速度，单位ms
4、autoplay：设置自动播放及播放时间
5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：分页圆点
7、paginationClickable：分页圆点是否点击
8、prevButton：上一页箭头
9、nextButton：下一页箭头
10、loop：是否首尾衔接
3.4 bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。
bootstrap中文网址：http://www.bootcss.com/
bootstrap 容器
- container-fluid 流体
- container
- 1170
- 970
- 750
- 100%
<div class="container-fluid">流体容器</div>
<div class="container">响应式固定容器</div>
bootstrap响应式查询区间：
1、大于等于768
2、大于等于992
3、大于等于1200
bootstrap 栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大于768排成一行，小于768分别占一行
4、col-xs- 始终排列成一行
<style type="text/css">
div[class*='col-']{
background-color:cyan;
border:1px solid #ddd;
height:50px;
}
</style>
......
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-5">col-lg-5</div>
<div class="col-lg-1">col-lg-1</div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<br>
<br>
<div class="row">
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
<div class="col-xs-3">col-xs-3</div>
</div>
</div>
列偏移
1、col-lg-offset-*
2、col-md-offset-*
3、col-sm-offset-*
4、col-xs-offset-*
bootstrap 按钮
1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组
<!-- 一般按钮组 -->
<div class="btn-group">
<input type="button" name="" value="按钮一" class="btn btn-primary">
<input type="button" name="" value="按钮二" class="btn btn-warning">
<input type="button" name="" value="按钮三" class="btn btn-danger">
</div>
<!-- 通栏按钮组
如果用input标签做按钮，需要将它用 btn-group的容器包起来
-->
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" name="" value="按钮一" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" name="" value="按钮二" class="btn btn-warning">
</div>
<div class="btn-group">
<input type="button" name="" value="按钮三" class="btn btn-danger">
</div>
</div>
<!-- 通栏按钮组，如果用a标签做按钮，就不用上面的结构，直接写
-->
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按钮一</a>
<a href="#" class="btn btn-default">按钮二</a>
<a href="#" class="btn btn-default">按钮三</a>
</div>
bootstrap 表单
1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单
<!-- 表单 -->
<form role="form">
<div class="form-group form-group-lg">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- 表单控件组 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@</span>
</div>
<!-- 表单控件组 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
bootstrap 图片
img-responsive 声明响应式图片
bootstrap 字体图标
通过字体代替图标，font文件夹需要和css文件夹在同一目录
bootstrap 导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
15、navbar-left 菜单靠左
16、navbar-right 菜单靠右
<!-- 可伸缩菜单 data-target="#.." 需要加# -->
<div class="navbar navbar-inverse navbar-static-top ">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="mymenu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业动态</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
路径导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
巨幕
<div class="jumbotron">
<div class="container">
...
</div>
</div>
bootstrap 模态框
1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">大弹出框按钮</button>
<div class="modal fade" id="mymodal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
大尺寸弹出框
</div>
<div class="modal-body">
模态框主体
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
bootstrap 下拉菜单
1、dropdown-toggle
2、dropdown-menu
<div class="row">
<div class="dropdown">
<div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</div>
<ul class="dropdown-menu">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
</ul>
</div>
</div>
bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
扫一扫
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
