下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >编程语言 >移动端 h5开发相关内容总结:CSS篇 (1)

移动端 h5开发相关内容总结:CSS篇 (1)

spring发布于 2017-12-26 10:15查看:1104回复:1

        1.移动端开发视窗口的添加

        h5端开发下面这段话是必须配置的

image.png

        其它相关配置内容如下:

            width viewport 宽度(数值/device-width)

            height viewport 高度(数值/device-height)

            initial-scale 初始缩放比例

            maximum-scale 最大缩放比例

            minimum-scale 最小缩放比例

            user-scalable 是否允许用户缩放(yes/no)

            minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。

        2.媒体查询的改进

        之前在做移动端开发的时候,为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。
        比如下面的 媒体查询代码

image.png

        这样做的结果,有两个很明显的缺点

            适配屏幕的尺寸不是连续的。

            在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

        后来参考淘宝移动端页面适配规则,使用 js 获取客户端的宽度,根据设计稿的原型动态的计算font-size 的值。

        3.a标签内容语义化

        大多数时候我们都会给一片区域加上点击跳转的功能。如下图:

image.png

        很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a是行内元素,是没有宽和高的。不能够把容器撑开。
        一种解决办法就是给a 标签设置block 属性。如下: 

image.png

        功能上已经没有问题。但是在语义化的层面上,上面的代码是不标准的。

        最好的做法就是做如下的修改,这样不会使自己的 html 代码显的太突兀:

 image.png

        4.为自己的页面设置最大宽度和最小宽度

        如果我们使用的是rem 单位,使用 js 动态计算font-size 值的话,我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。
        我们参看下京东和淘宝的h5 页面

image.png

image.png

        我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示(当然这不是必须的)。

        我给自己的产品页面定义的最大的宽度和最小宽度分别是:

image.png

        5.去掉 a,input 在移动端浏览器中的默认样式

        1.禁止 a 标签背景

        在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景的方法如下

image.png

        2.禁止长按 a,img 标签长按出现菜单栏

        使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下:

image.png

        3.流畅滚动

image.png

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享
spring  于   2017-12-26 10:18 重新编辑过

版主推荐

    共有1条评论

    • IT宅男
    • mr jack
    • Mr ken
    • Mright
    • cappuccino
    • YUI
    • 课课家运营团队
    • 课课家技术团队1
    • 酸酸~甜甜
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: