网页适配问题

自己对网页自适应有些不足,补充一下。另外区分一下 自适应 与 响应式 的区别。

  • 自适应是为了解决如何才能在不同大小的设备上呈现同样的网页
  • 响应式是自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动

技术选择

可知需要设置大小的样式: widthheightmarginpaddingfont-size ,列出来方便思考。
可知技术方案: 百分比布局、媒体查询 、 remvw系列flex 。每一项都有自己的优缺点,我们需要结合起来使用。以实验过程来说明一些问题:

  1. 只用百分比布局
  • 优点: 浏览器大小改变时布局不变。实现了 自适应网页
  • 缺点:
    • 如果屏幕过小,某个 div 内的内容可能过于拥挤,现在 PC 的屏幕不会太小,一般不会影响,但如果想要手机端或者平板访问此网页,效果可想而知。
    • 如果屏幕过大,某个 div 内的内容可能过于稀少,那么我们需要字体同步放大,需要图片或其他媒体资源同步放大
  1. 加上媒体查询

    百分比布局加上这个就可以实现 响应式布局这儿 有很多案例

  • 优点: 可以根据 @media 查询设置不同的样式,甚至布局。这样移动端通过修改布局也可以得到好的体验。
  • 缺点: 要多写好几倍的 css
  1. 锦上添花

    理论上上面的两个已经可以解决布局问题,但现实中你可能没有时间写那么多的 css。那我们需要其他好东西。

  • rem :根据网页的根元素来设置字体大小。现代浏览器默认的根元素字体大小是 font-size: 16px
    设置这个可以让不同屏幕下的字体大小同步缩放,也可以设置给 widthpaddingmargin。但不同的屏幕下需要给 html 节点 设定不同的 font-size 基准值。下面是几种方式:

    1. 配合 @media,例如: 网易新闻

      手机的屏幕宽度: iphone5 是 320px , iphone6/7/8/X 是 375px , iphone6/7/8 plus 是 414px ,下面是部分代码

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      @media screen and (max-width: 320px) {
      html {
      font-size:42.667px;
      font-size: 13.33333vw
      }
      }

      @media screen and (min-width: 361px) and (max-width:375px) {
      html {
      font-size:50px;
      font-size: 13.33333vw
      }
      }

      @media screen and (min-width: 413px) and (max-width:414px) {
      html {
      font-size:55.2px;
      font-size: 13.33333vw
      }
      }

      上面的 font-size 是由 屏幕宽度/7.5 得到的,网易新闻 的设计图应该是 750px 的,除以 7.5之后 font-size 就是 100px ,方便其他元素的计算。子元素都是通过 rem 设的宽高等,因为 414:375:320 = 55.2:50:42.667 , 所以在 320px、375px、414px下显示的效果是一样的,上面还用了 vw ,如果浏览器支持的话,可以不使用 @media ,直接设置 html: {font-size: 13.33333}vw, 13.33333 是通过 100/7.5 得到的。然后根据设计图将 px 换算为 rem 就行了,你也可以修改 7.5 为其他值,比如说 10 。

    2. js 动态计算

      1
      2
      /* 在 window.resize 方法里也要添加下面这条命令 */
      document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';
    3. 利用calc 自动计算

      可以直接设置 html: {font-size: 13.33333}vw ,好粗暴。 张鑫旭大神 有实践大型项目后的样式:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      html {
      font-size: 16px;
      }

      @media screen and (min-width: 375px) {
      html {
      /* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */
      font-size: calc(100% + 2 * (100vw - 375px) / 39);
      font-size: calc(16px + 2 * (100vw - 375px) / 39);
      }
      }
      @media screen and (min-width: 414px) {
      html {
      /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
      font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
      font-size: calc(18px + 4 * (100vw - 414px) / 586);
      }
      }
      @media screen and (min-width: 600px) {
      html {
      /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
      font-size: calc(125% + 4 * (100vw - 600px) / 400);
      font-size: calc(20px + 4 * (100vw - 600px) / 400);
      }
      }
      @media screen and (min-width: 1000px) {
      html {
      /* 1000px往后是每100像素0.5px增加 */
      font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
      font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
      }
      }
  • vw系列 : vw 代表屏幕的可见宽度,类似的还有 vhvminvmax 。百分比宽度是根据父节点的宽度设定的,当嵌套多层之后,用 vw 比较方便。如果浏览器都支持 vw 的话,完全可以用 vw 取代 rem ,上面 网易新闻 的 demo 还用 vw 来设定 htmlfont-size

  • flex: 让子元素成比例,垂直居中…等等,不要太方便

图片等媒体资源处理

jpg 等图片如果大小设置不合理会发生失真或者截取一部分的情况。所以我们通常这样处理:

1
2
3
img, video {
max-width: 100%;
}

这样,图片最大的时候会保持其原始大小和比例,不会放大失真。而图片变小时也会保持比例。

堂 wechat
欢迎关注我的微信公众号,里面有各种小故事哦!
坚持原创技术分享,您的支持将鼓励我继续创作!