media 属性的使用

最新推荐文章于 2023-05-01 13:53:42 发布

Anni的咖啡

最新推荐文章于 2023-05-01 13:53:42 发布

阅读量731

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zhou__9468/article/details/78174617

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.

media 属性规定被链接文档将显示在什么设备上。

media 属性用于为不同的媒介类型规定不同的样式。

二. 代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,inital-scale=1">
    <title></title>
    <style>
        @media (max-width: 320px) {
            body{
                background-color: red;
            }
        }
        @media (min-width: 321px) and (max-width: 375px) {
            body{
                background-color: blue;
            }
        }
        @media (min-width: 376px) and (max-width: 412px) {
            body{
                background-color: green;
            }
        }
        @media (min-width: 413px) and (max-width: 414px) {
            body{
                background-color: yellow;
            }
        }
        *{ margin:0 auto; text-align:center;}
        #id{font-size: 30px;color: red;font-family: 微软雅黑;}
        div{
            width: 256px;
            height: 256px;
            margin: 256px 256px;
            background-color: blue;
            /*旋转动画 旋转45度*/
            transform: rotate(45deg);
            /*设置动画从什么位置旋转*/
            transform-origin: center center;
        }
    </style>
</head>
<body>

    <div></div>
    <!-- iframe 元素会创建包含另外一个文档的内联框架（即行内框架）-->
    <div><iframe style="width: 200px;height: 200px" src="https://www.baidu.com/"></iframe></div>

</body>
</html>

Anni的咖啡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
media 属性的使用

一.media 属性规定被链接文档将显示在什么设备上。media 属性用于为不同的媒介类型规定不同的样式。二. 代码 @media (max-width: 320px) { body{ background-color: red;
复制链接

扫一扫