美文网首页
实现响应式网页设计

实现响应式网页设计

作者: 前端末晨曦吖 | 来源:发表于2022-09-17 21:16 被阅读0次

    @TOC

    为什么需要响应式网页

    点击打开视频讲解更加详细

    随着网页数量和质量的上升,以及设备种类和数量的增加,不同设备查看不同网页导致的缩放问题、排版问题等一系列前端问题越发明显。

    想要解决他们,我们可以为不同类型的设备编写不同样式的代码,做不同版本的测试。

    然而这样做有两个弊端:

    1. 工作量过大
    2. 同种类型设备的尺寸相差也可能很大,有时尽管专门设计了对应版本,依然无法保证每个用户的设备都能较好适配

    因此我们需要使用响应式网页来解决这个问题,通过设备自适应解决排版问题而非程序员编写对应代码适应设备,这样一来就能减少工作量,同时保证绝大多数设备都能很好适配

    什么是响应式网页

    利用 CSS 和 JavaScript 自动根据设备屏幕尺寸调整页面的布局和样式的网页,主要解决固定
    宽度和影响布局的元素的问题
    

    如何实现响应式网页

    1. 设置前置 meta 元素

    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    

    设置 name 属性值为 viewport,content 中的内容意味设置宽度为设备宽度,缩放比例为1(不缩放),因此移动设备查看 PC 网页时就不会缩放的很小,而是原始比例显示

    2. 设置了固定宽度的区域

    对于这类区域,有时会出现横向滚动条,很不方便

    因此,我们可以使用百分比宽度,使其根据浏览器可视区域自动调整尺寸

    即 width = 100% 或 max-width = 80%

    3. 使用布局的区域

    gird 布局默认竖向,不会产生问题,但是如果设置多列布局,且每列浮动宽度如 fr,那么就会导致每列过小。

    此时可以通过 repeat() 和 minmax() 函数来实现,当容器最后的空间不足以容纳列的最小宽度时,换行。

    flex 布局也有类似的问题,但 flex 默认就是横向,但是可以更简单的使用 wrap 和设置最小宽度的方式实现折行以及扩展

    4. 图片

    在 PC 端,我们可以简单的使用 width = 100% 来保证布局的美观大方,但这样一来,在移动端显示时就会导致图片过小,而且纵横比相反。

    我们可以使用 img 标签的 srcset 属性和 sizes 属性来根据最大宽度和像素密度选择合适的最大宽度图片路径

    <img src="../image-300.png" 
    srcset=" ../image-1240.png 1240w, 
             ../image-600.png, 600w
             ../image-300.png, 300w
    sizes="(max-width : 400px) 300px, (max-width : 900px) 600px, 1240px"/>
    

    我们也可以使用 picture 标签和 source 标签,在其中设置 media 属性和 srcset 属性,根据显示屏尺寸选择合适的图片,进行路径选择以及渲染

    使用一个 img 标签进行保底图片,以免出现无图加载的情况

    <picture> 
        <source media="(max-width : 400px)" srcset="../image-300.png" />
        <source media="(max-width : 900px)" srcset="../image-600.png" />
        <img src="../image-1240.png" /> 
    </picture> 
    

    5. 字体

    比较建议使用浮动单位进行调整,比如 em, rem , vw

    但是注意,使用 vw 时最好加一个保底数值,以免页面宽度过小时字体也会变得非常小:

    h1 { 
        font-size : calc(2rem + 2vw); 
    }
    

    我们也可以选择用 @media() 根据不同设备大小选择不同的字体大小:

    @media (max-width : 900px) { 
        h1 {font-size : 3rem;} 
    }  
    @media (max-width : 700px) { 
        h1 {font-size : 2rem;}
    } 
    

    若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!

    相关文章

      网友评论

          本文标题:实现响应式网页设计

          本文链接:https://www.haomeiwen.com/subject/sameortx.html