前端面试高频考点—“响应式”问题

最新推荐文章于 2024-07-08 17:22:08 发布

Beiyux

最新推荐文章于 2024-07-08 17:22:08 发布

阅读量995

点赞数

分类专栏：前端面试题归纳文章标签： css3 面试前端

本文链接：https://blog.csdn.net/weixin_45745641/article/details/121368148

版权

本文探讨了前端响应式布局的常用方案，包括使用媒体查询和rem单位。rem作为相对于根元素的单位，适用于响应式设计，但存在“阶梯”性弊端，无法进行精细的尺寸划分。同时，介绍了vw/vh单位，基于视口尺寸的百分比单位，提供了一种更灵活的自适应解决方案。

摘要由CSDN通过智能技术生成

响应式系列面试问题总结

rem
vw/vh

rem

px:：绝对长度单位，最长用
em：相对长度单位，相对于父元素，不常用
rem：相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常用方案

media-query, 根据不同的屏幕宽度设置根元素 font-size
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) and (max-width: 413px) {
   
            /* ipho