HTML5响应式页面

资料网址 developer.mozilla.org/zh-CN/docs/…
HTML5的兼容性检测 caniuse.com
在线检测编写是否符合标准 validator.w3.org

HTML/XHTML/HTML5

HTML：超文本标记语言。
XHTML：更加严谨的HTML。
HTML5：新一代HTML规范，可以适配端设备。
他们各自的文档声明
```
//
<!DOCTYPE html>
复制代码
```

移动端1px偏差的缘由和解决办法

1px偏差的缘由

window中有个devicePixelratio属性（设备像素比）例如，一个手机的真实尺寸是320*568，可是它的分辨率是640*1136，它这个就2倍的DPR；他表示物理像素和css像素的比例的不一样，在不一样的手机上这个这个设备像素比的值不一样，因此在css中写1px的长度映射到物理像素就有2px或者3px的长度。

解决1px长度不一样的方法

flexible.js解决。

flexible的原理是先获取设备的像素比，而后根据设备的像素比来动态的设定viewport的值，让viewport的宽度等于实际的设备物理宽度。
flexible的做用：根据屏幕分辨率大小的不一样，调整根元素html中的font-size，从而达到适配移动端。
通常flexible只是用于设置viewport的值，为了方便会搭配px2rem-loader使用，他是px自动转rem的插件。

伪类+transform解决

在父级元素设置相对定位，子元素利用绝对定位和transform:scale实现。

<div class="father">
    <div class='top'></div>
    <div class='center'></div>
    <div class='bottom'></div>
</div>
//样式
.father{
    position:relative;
    margin:20px 100px;
}
.top::after{
    position:absolute;
    content:'';
    pointer-events:none;
    /*元素永远不会成为鼠标的点击事件*/
    top:-50%;
    left:-50%;
    bottom:-50%;
    right:-50%;
    transform:scale(0.5);
    border:1px solid red;
}
.center::after{
    position:absolute;
    top:-50%;
    bottom:-50%;
    left:0;
    right:0;
    transform:scale(1,0.5);
    border:1px solid darkcyan;
    boeder:solid tansparent solid tansparent;
}
.bottom::after{
    position:absolute;
    content:'';
    bottom:0;
    left:0;
    right:0;
    tansform:scale(1,0.5);
    border-bottom:1px solid yellow;
}
复制代码

安卓浏览器看背景图，有些设备会模糊。

给图片设置background-size:contain后图片变清晰。

.logo{
    background-image:url(src/assets/logo.png);
    background-size:contain;
    width:24px;
}
复制代码

rem响应式布局开发（等比缩放布局）

css经常使用的单位
- px 像素固定单位。
- em 相对单位，相对于父元素的字体大小设定的单位。
- rem 相对于当前页面根元素（html）的字体大小设定的。
- % 相对于父元素的百分比。

开发操做方法一先设定根目录并利用函数计算。

- 第一步： 拿到设计稿后（通常是750px的)，咱们设定一个初始的REM和PX的换算比例。（通常是1rem=100px为了方便后期换算）
- 第二步：测量出设计稿中元素的尺寸（PS测出来的是PX单位），在编写样式的时候所有转为REM单位除以100，这个也叫作100%还原设计稿。
- 第三步：编写一段JS，获取当前设备的宽度，让其除以设计稿的宽度（750），再乘以初始的换算比例100，计算出当前设备下，1REM等于多少像素，（只要改变HTML中的font-size就能够了，font-size一改，全部的rem单位的元素都会跟着自动变化）
    ```
        function computedREM(){
            let htmlWidth = document.documentElement,
                winW = htmlWidth.clientWidth;
                htmlWidth.style.fontSize = winW/750*100+'px'
        }
        computedREM()
        window.addEventListener('riseze',computedREM)
    ```
- 第四步：主体响应式布局rem为主，部分效果实现能够基于Flex来作，微调还能够基于@media来完成。
复制代码

开发操做二利用vw

首先要先说明：移动端的设计稿通常是width：750px，height：auto（这里指的是不肯定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，咱们能够得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？是否是 1px = 100 / 750 vw = 0.13333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

上下拉动滚动条时卡顿、慢。

在body里设置overflow-scrolling:touch

H5的新特性

语义化标签
- header
- footer
- nav
- dialog
加强型表单-input中的type
- color 主要用于选取颜色
- data 从日期选择器中选择一个日期
- number 数值的输入域
- search 用于搜素
H5表单新增属性
- placehoder 输入提示框
- multiple 规定input元素中可多选
H5新事件
- onresize 当调整窗口大小时触发函数
- ondrag 当拖动元素时触发函数
- onerror 当错误发生时触发函数
- onplay 当媒介数据将要开始播放时触发函数
- onpause 当媒介数据暂停时触发函数

移动端H5常见知识点

HTML5响应式页面

HTML/XHTML/HTML5

移动端1px偏差的缘由和解决办法

1px偏差的缘由

解决1px长度不一样的方法

flexible.js解决。

伪类+transform解决

安卓浏览器看背景图，有些设备会模糊。

rem响应式布局开发（等比缩放布局）

开发操做方法一 先设定根目录并利用函数计算。

开发操做二 利用vw

上下拉动滚动条时卡顿、慢。

H5的新特性

开发操做方法一先设定根目录并利用函数计算。

开发操做二利用vw