rem布局之媒体查询

最新推荐文章于 2024-02-09 07:15:00 发布

WLY_Unity_Unreal

最新推荐文章于 2024-02-09 07:15:00 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/Wenliuyong/article/details/106872088

web前端专栏收录该内容

18 篇文章

订阅专栏

rem是一个相对单位,全称为root em,它以html的font-size为基准,如果html标签的font-size为20px,这时1rem=20px;通常移动端开发会使用rem作为布局方案,达到标签元素高度和宽度的适配.

媒体查询(Media Query):css3的一种新语法.可以实现在不同的屏幕尺寸上使用不同的样式.它的语法格式为:

@media 媒体类型 and|not|only (媒体特性) {
	css
}

媒体类型分为all,print,screen三种,all针对所有设备,print针对打印机,screen针对pc,手机,平板等设备.

媒体特性分为width,min-width,max-width三种,分别代表宽度,最小宽度,最大宽度.

例如,我想在宽度小于1000px的屏幕设备上使用一些样式,写法如下:

@media screen and (max-width: 1000px) {
			
}

下面写一个小案例,当屏幕宽度不同时,标题高度和字体大小也适应变化:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>rem布局</title>

    <style>
        /* 宽度320-640之间设置一个rem值 大于640设置一个rem值 */
        
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
        
        .header {
            height: 1rem;
            width: 100%;
            font-size: 0.5rem;
            text-align: center;
            line-height: 1rem;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="header">
        rem布局
    </div>
</body>

</html>

效果如下,当宽度在320-640之间时:

当宽度大于等于640px时:

通过rem,可以实现宽度、高度、字体大小行高等很多样式的适配,具有很强大的灵活性.

媒体查询之资源引入:

当我们通过link标签引入css样式等文件时,可以通过media属性针对不同的媒体设备引入不同的文件,这样呢可以实现在不同大小的屏幕上使用不同的样式文件,达到界面自适应的效果.下面通过一个小案例来看一下它的使用方式,我们使用两个盒子,当屏幕宽度在320-640之间时,一行显示一个盒子;当宽度大于等于640时,一行显示两个盒子.这里通过引入两个320和640下的css文件来实现,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>rem布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .content-box {
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
</head>

<body>
    <div class="content-box">
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
</body>

</html>

style320.css:

.item {
    width: 100%;
    height: 100px;
    background-color: #ccc;
    margin-bottom: 10px;
}

style640.css

.item {
    width: 50%;
    height: 100px;
    background-color: #ccc;
    float: left;
}

.item:nth-child(2) {
    background-color: pink;
}

主要通过link标签的media属性来实现这一功能:

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

效果如下:

320-640:

>=640: