移动端H5常见知识点

·  阅读 370

HTML5响应式页面

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 当媒介数据暂停时触发函数
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改