移动端基础及响应式布局

目录

1.移动端概述和hybird模式
2.响应式布局基础
3.响应式布局之流式布局
4.做移动端项目之前的准备
5.响应式布局demo
6.rem响应式布局
7.swiper的使用和轮播图
8.综合案例-微信场景应用

1.移动端概述和hybird模式

移动端：运行在移动设备上的产品
产品大部分都只需要适配ios和安卓系统即可
响应式布局：在不同的设备上都能给予客户最好的操作体验
移动端产品分为APP手机应用和H5
目前市面上流行的APP产品大部分都是原生APP开发者做的，ios：object-c，安卓：java-native，目前市场正在趋于使用js来开发原生APP：React Native、phoneGap…
H5：HTML页面，都是运行在浏览器中的（PC端浏览器、移动端浏览器），在ios和安卓平台上浏览器大部分是webkit内核的，所以移动端做H5页面不用像PC端一样处理兼容

总结：
1.做HTMl页面，需要在PC端和移动端访问
2.PC端和移动端用的是不同的项目，例如：京东、淘宝、QQ…PC端的项目不需要做响应式
3.在移动端开发出来的HTML页面运行的环境：移动端的浏览器、原生APP（Native APP）的webView中：hyBrid模式。例如在微信中打开一个H5页面，其实就是运行在微信的webView中的

hyBrid模式（混合模式移动应用）

把开发的H5页面嵌入到Native APP中的webView中运行（所谓的webView简单理解为一个浏览器，也是webkit内核的）

2.响应式布局基础

搭建一个H5页面，需要在head中添加一个meta标签：
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
webstorm中：meta:vp 加tab键可以自动生成

js动态设置：

var oMeta = document.createElement("meta");
oMeta.name = "viewport";
oMeta.content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
document.head.appendChild(oMeta);

viewport：视口
width=device-width：设置视口的宽度等于设备的宽度，如果不设置的话，默认宽度为980像素。通俗的说，就是告诉当前的浏览器按照多大的宽度来渲染页面，即展示当前这个页面的区域有多宽（浏览器宽度）

user-scalable=no：禁止用户手动缩放

initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0：设置屏幕默认/最大/最小的缩放比例

高清屏：
苹果手机是二倍高清屏的，也就是我们在手机上看到的那张100*100的图片，其实苹果手机是按照200*200的尺寸进行渲染的，这样的话，如果真实图片本身才100*100，最后呈现出来的就是被拉伸后变模糊的效果。故：苹果手机上需要的图片都需要比看到的尺寸大一倍才可以

DPI适配思想：在做页面的时候，最好每一张素材图片都准备2~3套，比如：logo.png是100*100，logo@2x.png是200*200，logo@3x.png是300*300

媒体查询 @media

媒体设备：all所有设备 screen所有屏幕设备（PC+移动端） print打印机设备…
媒体条件：指定在什么样的条件下指定对应样式
例如：
@media all and (max-width:319px){}宽度小于320px
@media all and (min-width:320px) and (max-width:359px){}在320~360之间
@media all and (-webkit-device-pixel-ratio:2){}二倍屏

3.响应式布局之流式布局

响应式布局的解决方法：

在真实项目中，设计师的设计稿一般是：640*1136 或 640*960 或 750*1334

流式布局法：

1. 容器或者盒子的宽度一般都不是固定的值，而是使用百分比，相对于视口区域的百分比
2. 其余的样式：字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置
3. 对于有些屏幕尺寸下，设置的固定值不是特别好看的话，使用@media进行微调整

苹果手机的尺寸：
5s及以下都是320px、6是375px、6p是414px
常用的安卓机尺寸：320px、360px、480px、540px、 720px…

特殊情况：设计稿是640px，素材图也是640px，这样的话在iPhone6/6p展示的时候，图片不够大，对于这种情况需要向设计师单独要一张更大的图，比如：1280px的尺寸

@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 321px) {
    .box {
        background: url("banner@big.png");
    }
}

@media all and (min-width: 641px) {
    .box {
        background: url("banner@big.png");
    }
}

4.做移动端项目之前的准备

常用的META标签(移动端)

忽略数字自动识别为电话号码：
<meta name="format-detection" content="telephone=no"/>

把页面增加到桌面主屏幕：
在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面。(只对IOS有效)

WebApp全屏模式：
<meta name="apple-mobile-web-app-capable" content="yes"/>

设置状态栏颜色：
只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的，即白色，网页从状态栏以下开始显示) | black(状态栏将为黑色，网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上)。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

添加到主屏后的图标：
<link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
IOS系统中对ICON有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。rel=”apple-touch-icon-precomposed”是设定按照设计稿原图的图标显示，rel=”apple-touch-icon”是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

添加到主屏后的标题：
<meta name="apple-mobile-web-app-title" content="标题"/>

添加智能App广告条 Smart App Banner(不常用)：
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>

QQ浏览器(X5内核)独有的META：
<meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->设置全屏

UC浏览器独有的META：
<meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="full-screen" content="true"/> //->设置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条 <meta name="nightmode" content="enable|disable"/> //->夜间模式

强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个<img src="" show="force"/>

<meta name="imagemode" content="force"/>

使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

<meta name="browsermode" content="application"/>

详细可参考：
http://www.zhufengpeixun.com/qianduanjishuziliao/mobileDevelopment/2016-07-02/480.html

常用的META标签：
http://www.zhufengpeixun.com/qianduanjishuziliao/mobileDevelopment/2016-06-29/457.html

5.响应式布局demo

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" charset="UTF-8" href="reset.css" type="text/css">
    <link rel="stylesheet" charset="UTF-8" href="index.css" type="text/css">
    <!--[if lt IE 9]>
    <script charset="UTF-8" type="text/javascript" src="HTML5.min.js"></script>
    <![endif]-->
</head>
<body>

<header class="header">
    <div class="con">
        <h1 class="logo">
            <a href="#"><img src="img/logo.png"/></a>
            猎豹安全浏览器
        </h1>
        <nav class="nav">
            <ul>
                <li class="bg">
                    <a href="#">首页<i></i></a>
                </li>
                <li>
                    <a href="#">下载<i></i></a>
                </li>
                <li>
                    <a href="#">论坛<i></i></a>
                </li>
                <li>
                    <a href="#">International<i></i></a>
                </li>
            </ul>
        </nav>
    </div>
</header>
<div class="headerBg"></div>

<!--banner-->
<section class="banner">

</section>
<script type="text/javascript"></script>
</body>
</html>

css代码：

html, body {
    width: 100%;
    overflow-x: hidden;
}

a