rem布局，能等比例缩放的布局

最新推荐文章于 2024-07-31 02:32:11 发布

天上人间一样愁

最新推荐文章于 2024-07-31 02:32:11 发布

阅读量873

点赞数

本文链接：https://blog.csdn.net/weixin_44392027/article/details/88808403

版权

本文通过一个简单的移动端案例，介绍了如何利用rem单位和媒体查询实现页面元素的等比例缩放布局。通过设置不同屏幕宽度下html的font-size，然后以rem为单位设置元素的尺寸，确保在不同设备上保持一致的比例。

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

html如下（这是一个简单的移动端案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="less/index.css" type="text/css">
    <link rel="stylesheet" href="../lib/font-awesome/css/font-awesome.css">
    <script type="text/javascript" src="../js/less.js"></script>
</head>
<body>
<!--版心-->
<div class="container">
    <!--顶部通栏-->
    <div class="sn_topBar">
        <a href="" class="icon_category"></a>
        <form action="">
            <span class="icon_search"></span>
            <input type="search" placeholder="60寸电视免费拿">

        </form>
        <a href="#" class="icon_cart"></a>

    </div>
    <!--轮播图-->
    <div class="sn_banner">
        <ul>
            <li><a href=""><img src="../images/banner08.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner01.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner02.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner03.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner04.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner05.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner06.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner07.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner08.jpg"