08-移动端

作者: 努力爬行中的蜗牛 | 来源:发表于2018-12-13 17:53 被阅读5次

08-移动端
08-移动端开发教程-移动端适配方案
011-移动支付09-支付宝支付-iOS端开发
运营More|0612近期产品运营情况及建议
无星的前端之旅（十六）——移动端调试技巧
移动端重置样式和公共样式
各大高清卫视频道在线直播【ivi测试】&转载自【蚂蚁号】
移动端事件
【总结】移动端和PC端产品差异分析
m.uyunbaby.com SEO优化点

移动端与PC端页面布局区别

视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用meta标签，name=“viewport”来设置视口的大小，将视口的大小设置为移动可视区一样的大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scaleable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0">
    
    <title>视口</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box">div里面的文字</div>

</body>
</html>

视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素密度可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4，3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像就会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scaleable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0">
    
    <title>视网膜屏幕</title>
    <style type="text/css">
        /* retina 屏幕适配：通过样式将它的尺寸设为原来的一般*/
        .shipei {
            width: 300px;
            height: 215px;
        }
    </style>
</head>
<body>
    <img src="images/pic1x.jpg" alt="1倍图">
    <img src="images/pic2x.jpg" alt="2倍图" class="shipei">

</body>
</html>

background新属性

background-size：

length：用长度值指定背景图像大小。不允许负值。
percentage：用百分比置顶背景图大小。不允许负值。
auto：背景图像的真是大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

<!DOCTYPE html>
<html>
<head>
    <title>background图片尺寸设置</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 300px;
            border: 2px solid #000;
            margin: 50px auto 0;
            background: url(images/apple.png) no-repeat;
            /*background-size: 200px 200px;*/
            /*background-size: 100% 100%;*/

            /*background-size: cover;*/
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box">dfdffdfdf</div>

</body>
</html>

适配布局类型

PC及移动端页面适配方法
设备屏幕有多重不同的分辨率，页面适配方案有如下几种：
1、全适配：响应式布局+流体布局
2、移动端适配：

流体布局+少量响应式
基于rem的布局

流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置为从边线计算盒子尺寸。

calc()
可以通过计算的方式给元素加尺寸，比如：width:calc（25% - 4px);

** box-sizing**
1、content-box 默认的盒子尺寸计算方式
2、border-box 设置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

<html>
<head>
    <meta name="viewport" content="width=device-width, user-scaleable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0">

    <title>流体布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        .con a {
            display: block;
            /*width: calc(25% - 4px);*/
            width: 25%;
            box-sizing: border-box;
            height: 100px;
            background-color: gold;
            text-align: center;
            line-height: 100px;
            float: left;
            text-decoration: none;
            color: #333;
            font-size: 14px;

            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
        <a href="#">菜单文字</a>
    </div>

</body>
</html>

响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式快，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕路（pc、平板、手机）。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scaleable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0">

    <title>响应式布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        .con div {
            width: 23%;
            border: 2px solid #000;
            background-color: gold;
            height: 200px;
            margin: 1%;

            float: left;

            box-sizing: border-box;
        }

        @media (max-width: 800px) {
            .con div {
                width: 46%;
                margin: 2%;
            }
        }

        @media (max-width: 400px) {
            .con div {
                width: 94%;
                margin: 3%;
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

</body>
</html>

基于rem的布局

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

cssrem
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目，比如：git clone http://github.com/flashlizi/cssrem进入packages目录：Sublime Text->Preference->Browse Package... 复制下载的cssrem目录到刚才的packages目录里。重启Sublime Text。

配置参数参数配置文件：Sublime Text->Preference->Package Settings->cssrem px_to_rem -px 转rem的单位比例，默认为40。max_rem_fraction_length -px转rem的小数部分的最大长度。默认为6。available_file_types- 启用此插件的文件类型。默认为：[".css",".less",".sass"]。

em单位

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box01 {
            font-size: 15px;

            width: 20em;
            height: 10em;
            background-color: gold;
        }

        .box02 {
            font-size: 20px;

            width: 20em;
            height: 10em;
            background-color: green;
        }

        p {
            font-size: 20px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="box01"></div>
    <br>
    <br>
    <div class="box02"></div>

    <p>
        首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
    </p>

</body>
</html>

rem单位

<!DOCTYPE html>
<html style="font-size: 30px">
<head>
    <title></title>
    <style type="text/css">
        .box01 {
            font-size: 15px;

            width: 20rem;
            height: 10rem;
            background-color: gold;
            margin: 1rem;
        }

        .box02 {
            font-size: 20px;

            width: 20rem;
            height: 10rem;
            background-color: green;
            margin: 1rem;
        }
    </style>
</head>
<body>
    <div class="box01"></div>
    <div class="box02"></div>


</body>
</html>

rem布局

<!DOCTYPE html>
<html style="font-size: 20px;">
<head>
    <meta name="viewport" content="width=device-width, user-scaleable=no, initial-scale=1.0, maximun-scale=1.0, minimum-scale=1.0">

    <script type="text/javascript" src="js/set_root.js"></script>

    <title>rem布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        .header {
            height: 2.5rem;
            background-color: gold;
            text-align: center;
            line-height: 2.5rem;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="header">头部文字</div>

</body>
</html>

css3前缀

为了瓤css3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome和safari
比如：

div {
    -ms-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -o-transform:rotate(30deg);
    -moz-transform:rotate(30deg);
    transform: rotate(30deg);
}

自动添加浏览器前缀
目前的情况是，有些css3属性需要加前缀，有些不需要加，有些只需要添加一部分，这些加前缀的工作可以交给插件来完成，比如安装：autoprefixer。
可以在 Sublime text中通过package control安装autoprefixer。

Autoprefixer在Sublime text中的设置
1、preference/key Bindings-User
{"keys":["ctrl+alt+x"],"command":"autoprefixer"}
2、Preferences>package setting>AutoPrefixer>Setting-User
{
"browsers":["last 7 versions"],
"cascade":true,
"remove":true
}
last 7 versions:最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀

HTML5新增标签

新增语义标签
1、<header>页面头部、页眉
2、<nav>页面导航
3、<article>一篇文章
4、<section>文章中的章节
5、<aside>侧边栏
6、<footer>页面底部、页脚

音频视频
1、<audio>
2、<video>
PC端兼容h5的新标签的方法，在页面中引入以下js文件
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5新增表单控件

新增类型：网址邮箱日期时间星期数量范围电话颜色搜索

    <label>网址：</label><input type="url" name="" required=""><br><br>
    <label>邮箱：</label><input type="emaiL" name="" required=""><br><br>
    <label>日期：</label><input type="date" name=""><br><br>
    <label>时间：</label><input type="time" name=""><br><br>
    <label>星期：</label><input type="week" name=""><br><br>
    <label>数量：</label><input type="number" name=""><br><br>
    <label>范围：</label><input type="range" name=""><br><br>
    <label>电话：</label><input type="tel" name=""><br><br>
    <label>颜色：</label><input type="color" name=""><br><br>
    <label>搜索：</label><input type="search" name=""><br><br>

新增常用表单控件属性：
1、placeholder 设置文本默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input type="text" name="" placeholder="搜索">

    <input type="text" name="" autofocus>
    <!-- 关闭系统自带联想功能 -->
    <input type="text" name="" autocomplete="off">

</body>
</html>

08-移动端
移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980p...
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的...
011-移动支付09-支付宝支付-iOS端开发
上一篇：010-移动支付08-银联支付-安卓端开发一、下载开发包去官网把开发包及Demo下载下来。支付宝iO...
运营More|0612近期产品运营情况及建议
一、移动端用户渠道建立与移动端的用户沟通困难。 A 移动端访问 m.pp.cc b 移动端访问 http://...
无星的前端之旅（十六）——移动端调试技巧
背景常见的需求，开发移动端h5，在移动端浏览器或者移动端app上渲染。前端不知道怎么在移动端调试，移动端不知道...
移动端重置样式和公共样式
移动端重置样式移动端公共样式
各大高清卫视频道在线直播【ivi测试】&转载自【蚂蚁号】
CCTV-1高清 PC端移动端 CCTV-3高清 PC端移动端 CCTV-5+高清 PC端移动端 CCTV-6高清...
移动端事件
移动端事件触屏事件移动端事件要比PC端要简单的多，移动端主要就有ontouchstart ontouchend...
【总结】移动端和PC端产品差异分析
写在前面： “PC端走衰，移动端崛起”、“移动端应用将快速超越PC端”、“PC端将被移动端所取代”...相信类似这...
m.uyunbaby.com SEO优化点
pc端：移动端： **总结：（1）对照PC端信息，移动端也做一样的**