H5 移动端布局

在开始移动端布局前要先了解一下设备宽度,页面大小,浏览器视口三者之间的区别

  设备宽度:实物设备的大小,设备的分辨率,具体数据是设备生产的厂家给的。

  页面大小:设计稿上规定的页面的宽度和高度

  浏览器视口:浏览器自带的用document.documentElement.clientWidth查看,在移动设备上如果不做视口处理一般默认是980

在写移动端的时候,我们需要将这三者统一:

  1.将设备宽与浏览器窗口统一

  在head之间加一个meta标签 name=“viewport”,代码如下

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  2.当设备宽与浏览器窗口一致了,如果还使用原来的页面布局方式,当页面的宽超出设备的宽时,超出的部分会被截掉。不能使用传统的页面开发模式了。我们就引入了新的布局方式:

    1.弹性布局(弹性盒子)

      1.分俩部分  弹性父级   弹性子元素

      2.给父级设置display:flex或inline-flex

       flex-direction 指定弹性盒子中子元素的排列方式,他的值有

        row:横向从左到右排列(左对齐),默认的排列方式。

        row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)

        column:纵向排列。

        column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

      2.流式布局(百分百布局) //待补充

      3.响应式布局   //待补充

      4.rem布局    //待补充

转载于:https://www.cnblogs.com/yangzhiqiang/p/10827462.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值