[HTML_CSS]@media 实现页面自适应布局

最新推荐文章于 2024-06-01 09:39:57 发布

螺丝钉tina

最新推荐文章于 2024-06-01 09:39:57 发布

阅读量4.8k

点赞数 3

分类专栏： Full Stack Developer 文章标签： media html css

本文链接：https://blog.csdn.net/u013716535/article/details/106029256

版权

Full Stack Developer 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

HTML5

19 篇文章 0 订阅

订阅专栏

什么是自适应

一套代码，可以根据屏幕大小，以合理的样式出现在手机，ipad，pc。
总所周知Bootstrap可以实现页面自适应布局，在不添加Bootstrap的情况下，使用@media 也可以实现页面的自适应布局。

怎么使用@media语法

根据不同宽度，选择不同的样式，screen是告知设备在打印页面时使用衬线字体

大于1000px
```
@media screen and (min-width:100px){}
```

小于1000px大于500px

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

小于500px
```
@media screen and (max-width:960px){}
```

竖屏

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

横屏

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

width
浏览器可视宽度
device-width

设备屏幕的宽度

补充

display: none
隐藏页面元素
display: inline-block
显示为内联块元素
块级元素(block)：总是独占一行
div/h1/h1/h3/h4/hr/ol/ul/li…
内联元素(inline)：和相邻的内联元素在同一行
b/img/input/label/select/span…

示意图

在这里插入图片描述

代码

安装VSCode，这个官网有
安装live-server 插件，可以时时监控页面变化
输入！生成html模板，viewport 是网页默认宽高，下面代码指默认页面宽度为屏幕宽度。这个代码是为自适应做准备
```
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
```
不能使用px，页面样式会根据页面变化，最好用 % | em | vh

Html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置IE渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <link rel="stylesheet" href="css/5.css">
    <title>media</title>
</head>

<body>

    <div class="box one">max-width: 500px red</div>
    <div class="box two">min-width: 500px& max-width: 1000px yellow</div>
    <div class="box three">min-width: 1000px green</div>
    <div class="box iphone">iPhone: 375px grey</div>

    <p class="view"><strong>Your current viewing area is:</strong>
        <span class="lt500">lt500</span>
        <span class="bt500-1000">between 500 - 1000px</span>
        <span class="gt1000">gt1000</span>
    </p>
</body>

</html>

Css

.box {
    border: solid 1px black;
    margin: 50px;
    padding: 10px 10px;
}

span {
    display: none;
}


@media screen and (max-width: 500px) {
    .one {
        background: red;
    }

   .lt500 {
        display: inline-block;
    }
}

@media screen and (min-width: 500px) and (max-width: 1000px) {
    .two {
        background: yellow;
    }

   .bt500-1000 {
        display: inline-block;
    }
}

@media screen and (min-width: 1000px) {
    .three {
        background: green;
    }

   .gt1000 {
        display: inline-block;
    }
}

/* max device width */
@media screen and (max-device-width: 480px) {
    .iphone {
        background: #ccc;
    }
}

本节代码地址

还做了一个自适应的blog demo，原理和这个一样，大家感兴趣的可以直接看demo6
示意图：
在这里插入图片描述

螺丝钉tina

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
[HTML_CSS]@media 实现页面自适应布局

目录什么是自适应怎么使用@media语法补充示意图代码本节代码地址什么是自适应一套代码，可以根据屏幕大小，以合理的样式出现在手机，ipad，pc。总所周知Bootstrap可以实现页面自适应布局，在不添加Bootstrap的情况下，使用@media 也可以实现页面的自适应布局。怎么使用@media语法根据不同宽度，选择不同的样式，screen是告知设备在打印页面时使用衬线字体大于1000px@media screen and (min-width:100px){}小于1000px大
复制链接

扫一扫

专栏目录