08-移动端

移动端与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>

最后编辑于：2018.12.16 14:03:04

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,635评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,628评论 3赞 396
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 165,971评论 0赞 356
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,986评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,006评论 6赞 394
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,784评论 1赞 307
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,475评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,364评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,860评论 1赞 317
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,008评论 3赞 338
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,152评论 1赞 351
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,829评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,490评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,035评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,156评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,428评论 3赞 373
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,127评论 2赞 356