关于前端学习:CSS样式移动端适配

48次阅读

共计 1163 个字符,预计需要花费 3 分钟才能阅读完成。

  • 理解 viewport 视口

    • 挪动端 viewport 视口就是浏览器显示页面内容的屏幕区域
    • viewport 视口包含布局视口(layout viewport)、视觉视口(visual viewport)、现实视口(ideal viewport)
  • 布局视口(layout viewport):布局视口与挪动端浏览器屏幕宽度独立开,CSS 布局依据布局视口进行计算视口大小,并被它束缚;挪动端布局视口默认宽度为 980px,在挪动端看 PC 端网页时内容很小,须要进行手动缩放查看
  • 视觉视口(visual viewport):视觉视口指用户看到的区域,用户可对视口进行缩放操作,且不影响布局视口
  • 现实视口(ideal viewport):布局视口默认值并不是一个现实宽度,所有浏览器厂商引入了现实视口概念,对于设施领有一个最现实的布局视口宽度,无需用户手动缩放操作网页查看,利用 <meta name="viewpost" content="width=device-width"> 可设置布局视口宽度与现实视口宽度统一
  • 设置视口

    <meta  name="viewport"  content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    • content 内属性值:

      • 视口宽度:width=” 正整数或 device-width”
      • 视口高度:height=“正整数或 device-height“
      • 初始缩放值:initial-scale=1.0
      • 最小缩放值:minimum-scale=1.0
      • 最大缩放值:maximum-scale=1.0
      • 用户缩放操作权限:user-scalable=no
  • 挪动端适配计划

    • 百分比(流式)布局: 将盒模型宽度设置为百分比,使盒模型宽度进行主动适应屏幕宽度,不受像素单位的束缚,内容向两侧填充
      长处:大屏显示内容更多
      毛病:宽屏下比例失调
    • rem 布局:em 单位和 rem 单位是绝对单位,1em 是绝对于以后元素或父元素的 font-size 值,而 1rem 是绝对于根元素(html 元素)的 font-size 值
  • 设置根元素的动静的 font-size 值

    • 应用 JS 配合实现
    <script>
    // 获取浏览器以后视口宽度
    var  fontsize=document.documentElement.clientWidth *100 / 375;
    // 给 html 增加 font-size
    document.documentElement.style.fontSize=fontsize+'px';
    </script>
    • 计算 VW 单位实现适配
    // iPhone 6 为例进行计算:100 px / 375px * 100
    html {font-size: 26.67vw;}
    body {
      /* 设置回默认 16px 字体大小
      font-size: 0.16rem;
    }

正文完
 0