html+css实现响应式布局入门

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

锋君

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

阅读量2.1k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/xiuyuandashen/article/details/104332532

版权

什么是响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
-------来自百度百科

媒体查询

	@media  not|only mediatype and (expressions) {} 
	不过我喜欢用 @meadia  screen and（expressions）{}

not :表示 not是用来排除掉某些特定的设备的例如 @media not xxx
only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取 Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等
speech	用于屏幕阅读器

简单的案例

html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src=""></script>
</head>

<body>
    <div id="a"><h1>aaaaa</h1></div>
    <div id="b"><h1>bbbbb</h1></div>
    <div id="c"><h1>ccccc</h1></div>
    <div id="d"><h1>ddddd</h1></div>

</body>

</html>

css

  body{
            font-family: Arial, Helvetica, sans-serif;
            background-color: gray;
            color: white;
            text-align: center;
            padding-top:100px;
          /*  transition: display  2s; */
    }
    h1{
        display: none;
    }
    /* 媒体查询 */
    @media (max-width: 500px){
        body{
            background-color: rebeccapurple;
        }
        #d h1{
            display: block;
        }
    }

    @media (min-width: 501px) and (max-width: 756px){
        body{
            background-color:red;
        }
        #c h1{
            display: block;
        }
    }

    @media (min-width: 757px) and (max-width: 998px){
        body{
            background-color:blue;
        }
        #b h1{
            display: block;
        }
    }
    @media (min-width: 999px) and (max-width: 1199px){
        body{
            background-color:darkgreen;
        }
        #a h1{
            display: block;
        }
    }

效果

在这里插入图片描述

讲讲em和rem

em 和 rem 都是描述字体大小的，首先em和rem都是相对长度单位。em是相对于当前对象内文本的字体尺寸。说人话就是em继承父级标签的大小，例如0.1em字体大小就是父级标签字体大小的0.1倍，而rem是css3新增的相对单位，rem相对的是html根标签字体的大小，例如chrome默认的html标签字体大小是16px ，那对应的1rem就是16px。在响应式布局中rem是比较好用的。