H5编写移动端注意事项

在编写移动端网页时需要注意如下几点:

  1. 首先,在创建好的 .html 页面中需要设置 Viewport


  1. 单位的使用
    首先我们需要明白一些单位作用:px一般都是固定的大小、 em是参考其父级元素的font-size所设置的值(因此,首行缩进经常会用到:text-indent:2em;)、 rem则是参考的html下的font-size的值,是相对的
    在移动端开发中,为了能够自适应,不要出现 px 单位(除非确定的元素)
    使用:
    1)百分比
    2)rem
    3)屏幕宽度不需要给出,使其自适应即可
    4)文字大小使用 rem
    注意:页面汇总 rem 参考的是html中的font-size的值,为了方便计算,将 html 中的字体大小设置为:font-size:50px; 这样之后的测量中,将px单位直接 *0.01 即可。
  2. 移动端开发中无需考虑浏览器的兼容性问题,因此H5、C3、flex布局等均可使用
  3. 补充:为了能够更好的适应多种屏幕,可以加上媒体查询,改变不同屏幕下的html中的font-size的大小
@media screen and (max-width: 374px) {
    html{
        /*让rem做一个基数*/
        font-size: 40px;
    }
}
@media screen and (min-width: 374px) and (max-width: 768px) {
    html{
        /*让rem做一个基数*/
        font-size:50px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    html{
        /*让rem做一个基数*/
        font-size:95px;
    }
}
@media screen and (min-width: 1024px) {
    html{
        /*让rem做一个基数*/
        font-size:130px;
    }
}

flex伸缩布局使用选择:
1.传统的pc端网站,考虑兼容性,尽量不用弹性布局和css3等效果
2.假如不兼容ie低版本浏览器,可以使用
3.写响应式网站或者手机端的(移动端)网页的时候可以随便使用

如下,是我在学习移动端开发之后,写的简单demo,大家可以参考
https://zlqgithub.github.io/移动端/
H5编写移动端注意事项_第1张图片

页面配置上需要注意

  • 视图 (viewport)

  • 点击响应延迟3毫秒
    原因:为了判断用户是否在双击,快速去响应用户的双击事件,因此引入了 fastclick.js
    下载使用:https://www.bootcdn.cn/fastclick/ (CDN)
                      https://github.com/ftlabs/fastclick (GitHub上下载)

    配置和使用(基于vue项目来实现)



你可能感兴趣的:(H5编写移动端注意事项)