Skip to content

html-17 移动端布局

一、响应式布局

  1. 响应式的图片

    需要给图片设置max-width:100%;height:auto;

  2. 响应式的字体

    html{font-size:100%;}

    之后可以设置响应式的字体:

css
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

响应式网站的优点

  1. 减少工作量

    网站、设计、代码、内容都 只需要一份

    多出来的工作量只是JS脚本、CSS样式做一些改变

  2. 节省时间

  3. 每个设备都能得到正确的设计

响应式网站的缺点

  1. 会加载更多的样式和脚本资源
  2. 设计比较难精确定位和控制
  3. 老版本浏览器兼容不好

二、媒体查询

通过媒体查询我们可以对不同的设备指定特定的样式

  1. 在link标签后面输入(css2)
html
<link rel="stylesheet" href="2.css" type="text/css" media="screen and (min-width:1000px)">  //在link后面还引入
<link rel="stylesheet" href="2.css" type="text/css" media="screen and (orientation:landscape)">  //横屏显示

orientation:portrait //竖屏

在css文件后面直接写(css3)

css
@media screen and (min-width:600px) and (max-width:1000px){}   //需要修改的样式写在括号里面,可以针对单独的修改样式。

三、移动端布局

  1. 页面html头部代码说明:
html
<meta name="keywords" content=" "> 关键字
<meta name="description" content=""> 描述
<link rel="icon" href="images/icon.ico">插入logo标题
  1. 设置viewport(至少记住三个)
html
<meta name="viewport" content="" />
  • width=device-width

  • height:设置的viewport高度(一般不设置)

  • initial-scale=1.0:页面初始缩放比例,可以为小数

  • minimum-scale:最小缩放比例,可以为小数

  • maximum-scale:最大缩放比例,可以为小数

  • user-scalable:是否允许用户缩放页面,“no”不允许,“yes”允许

使用rem布局

100px=1rem;自适应;

html
<script> 
    var deviceWidth = document.documentElement.clientWidth; // 获取浏览器的宽度 
    if(deviceWidth>720){ // 判断浏览器的宽度是否大于720 
        deviceWidth = 720; 
    } 
    var fs = (deviceWidth*100)/720; // 当浏览器大于等于720的时候,font-size 为100,720是页面设计图的宽度。
    document.documentElement.style.fontSize = fs + "px"; // 给html设置font-size 
</script>

自适应布局

js
function Resize(){
    // 后面的40是font-size大小, 即1rem=40px
    let w = document.documentElement.clientWidth / 375 * 40
    document.documentElement.style.fontSize = w + 'px'
}

禁止手机端缩放

html
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

iphoneX兼容处理方案

  1. 首页必须给meta标签添加name字段为viewport的, content值增加viewport-fit=cover;

    html
    <meta name='viewport' content='viewport-fit=cover'>
  2. 单独给body增加iphonex的安全距离不起作用, 是由于position: fixed属性, bottom: 0造成吸底了, 需要给所有的bottom: 0增加对应的安全距离, 不再写bottom: 0, 而是写bottom: env(safe-area-inset-bottom)

  3. 两个函数介绍

    • constant :针对iOS < 11.2以下系统

    • env :针对于iOS >= 11.2的系统

    因此两个函数都得增加上

  4. 支持的变量:

    • safe-area-inset-left:左边的安全距离

    • safe-area-inset-right:右边的安全距离

    • safe-area-inset-top:上边的安全距离

    • safe-area-inset-bottom:下边的安全距离

  5. 两种情况处理方式

    • bottom不是0

    • 使用calc函数进行计算, 原有的bottom距离加上, 比如:bottom: calc(50px + env(safe-area-inset-bottom))

    • bottom是0

    • 增加一个空的块, 写入如下样式

    css
    body::after {
       position: fixed;
       bottom: 0;
       height: 0;
       width: 100%;
       height: constant(safe-area-inset-bottom);
       height: env(safe-area-inset-bottom);
       background-color: #fff; /* 需要与bottom颜色一致 */
    }
  6. 使用@supports隔离兼容模式,判断浏览器是否支持该属性

    css
    @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
        body::after {
            ....
        }
    }

四、移动端布局解决方案

  1. 布局方式:

    1. 固定布局

      1. 页面设置单位都是px,一般设置整个页面宽度320px,
      2. 缺点:大于320px的页面,两边都会留白,不好看。
    2. 流式布局:

      1. 宽度使用百分比,高度设置px,页面会出现拉伸,不兼容。
    3. 响应式布局:

      1. 利用媒体查询,判断不同的设备,使用不同的css文件,比较麻烦。
      2. 优点是:根据不同的手机页面适配不同,用户体验极好。
      3. 在引入css文件后面添加media="screen and (min-width)";限制使用css文件。
      4. min-width最小宽度,max-width最大宽度,min-height最小高度,max-height最大高度。
    4. rem布局:

      1. 设置页面html的font-size大小做比较,使用js代码获取设备的宽度给页面font-size赋值,实现元素自适应。
      2. 需要注意浏览器会有最小字体大小,会出现小尺寸手机文字下掉,设置单行/多行文本超出显示点状
      3. 图片是根据基线对齐,设置了默认页面font-size大小之后,字体变大,图片会下掉,转块可以解决。
      4. 图片需要设置宽高才能等比例缩放,放置背景图需要设置背景尺寸100%,否则图片大小无法根据rem等比例缩放,无法显示完整的图片。
  2. rem单位:

    1. 当html{font-size:100px;}时,页面使用则1rem=100px;
  3. em单位:

    1. 针对局部使用:当em的div{font-size:100px; },div里面width:1em=100px;

五、使用插件自动转换px

  1. postcss-px2rem 将px转换成rem
  2. postcss-px-to-viewport 将px转换成vw

六、移动端调试

vconsole

html
<script src="https://cdn.jsdelivr.net/npm/vconsole"></script>
<script>new VConsole();</script>

image

eruda调试工具

html
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

<!-- 使用js -->
<script id='load_eruda'>
    window.onload = function(){
      if(window.pre_host === 'uat') {
        var script = document.createElement('script');
        script.setAttribute('src', '//cdn.jsdelivr.net/npm/eruda')
        script.setAttribute('type', 'text/javascript')
        document.body.appendChild(script)
        script.onload = function () {
          eruda.init();
          document.getElementById('load_eruda').remove()
        }
      } else {
        document.getElementById('load_eruda').remove()
      }
    }
</script>

image

spy-debugger

前面两个都是在项目里面html标签直接引入,手机上面显示调试工具,这个需要代码操作,比较麻烦,好处是不需要针对项目调试,所有的h5网页均可调试

  1. 安装:npm i spy-debugger -g

  2. 启动:spy-debugger

  3. 手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下)

  4. 设置手机的http代理,ip地址为pc的ip地址,端口为spy-debugger启动之后的端口,默认为9888;

  5. 手机安装证书:进入spy-debugger启动之后的官网 --> 点击请求抓包 --> 点击RootCA --> 手机扫描该二维码进行安装证书

    image-20200619160334023

  6. 之后进入在手机里面就可以直接访问地址了,可以通过spy-debugger启动的网站,进行查看console或html元素等信息;

chrome直接调试

  1. 手机使用数据线连接至电脑
  2. 浏览器输入地址:chrome://inspect/#devices
  3. 手机安装chrome移动版浏览器,并输入地址,即可以调试;
  4. 出现的地址中,点击devices直接就可以调试了;

image-20200720113115699

效果图如下:

image-20200720113127408

移动端不能通过ip地址访问

查看webpack-dev配置,改为:host: '0.0.0.0'

七、与原生端联调

在原生端的最顶端对象同样是window,我们可以将值放在window对象上;

安卓端

举例:安卓端绑定方法到window对象上

js
window.*.getStatusBarHeight();

ios端

h5通过在window上面绑定方法,直接调用ios的方法,ios内部调用该方法,将值传入;

ios定义一个方法,让h5调用,在这个方法内部调用h5绑定在window上的方法,并将值传送这个方法;

h5通过在postMessage里面可以直接向ios端发送消息;

js
window.getInfo = function(info) {}
window.webkit.messageHandlers.toH5Version.postMessage('')

参考文章

  1. Html5 页面适配iPhoneX(就是那么简单)

Released under the MIT License.