前端面试高频考点—‘响应式布局’问题

阅读量：

响应式系列面试问题总结

rem
- - 响应式设计中常见的实现方式
  - - 示例：
  - rem存在的问题：呈现效果呈现“阶梯”状变化
- vw/vh
- - 网页可视区域的尺寸参数
  - vw/vh
  - 示例：

rem

px：绝对长度单位，应用最为广泛
- em：相对长度单位，其基准为父级元素，使用频率较低
- rem：相对长度单位，其参照对象为根元素，通常应用于响应式页面布局

响应式布局的常用方案

media-query，依据屏幕宽度差异调整根元素的字体大小
- rem，以根元素为基准的相对单位

样例：

复制代码

    <style type="text/css">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px)

全部评论 (0)

还没有任何评论哟~