media 属性的使用

来源：互联网发布：哪有学java的学校编辑：程序博客网时间：2024/06/05 17:06

一.

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>

阅读全文

0 0