Media query媒体查询

最新推荐文章于 2024-10-03 10:48:55 发布

三三三思

最新推荐文章于 2024-10-03 10:48:55 发布

阅读量522

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_45746493/article/details/109028279

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Media query媒体查询

Media query语法格式中的设备类型如下：

  all:适用于所有的设备类型 
  aural:适用于语音和音频合成器 
  braille:适用于触觉反馈设备
  embossed:适用于凸点字符，印刷设备  
  handheld:适用于小型或手提设备  
  print:适用于打印机  
  projection:适用于摄影图像、如幻灯片 
  screen:适用于计算机显示器  
  tty:适用于适用固定间距字符的设备，如电传打字机和终端
  tv:适用于电视类设备

引入媒体类型的方法：

linky引入

 <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

  @import方式引入（3种方法）

 @import url("css/reset.css") screen;
 @import url("css/print.css") print;
 <head>
    <style type="text/css">
    @import url("css/style.css") all;
    </style>
 </head>

@media引入

@media screen{
     选择器{
    属性：属性值；
     }
   }

最大宽度

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

关键字：

     not：关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备
     only：用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

其中head中的自适应代码（也是必不可少的代码）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这是我写的一个自适应网页
在这里插入图片描述

style.css

body{
 margin: 0;
 padding: 0;
 margin: 0 auto;
 background: url(../img/body-bg.jpg);
}
header{
 width: 80%;
 height: 100px;
 margin: 0 auto;
 color: white;
}
.nav{
 width: 100%;
 height: 30px;
 background-color: #666;
 border-radius: 10px;
}
ul li{
 float: left;
 list-style: none;
 width: 100px;
 height: 30px;
 line-height: 30px;
 text-align: center;
}
ul li:hover{
 background-color: cyan;
 color: black;
}
.search{
 float: right;
 border-radius: 10px;
 line-height: 25px;
 margin-right: 5px;
}
main{
 height: 900px;
 width: 80%;
 margin: 40px auto;
}
.main_left{
 float: left;
 width: 60%;
 height: 900px;
 background-color: white;
 border-radius: 20px;
 padding-left: 20px;
}
.main_left_text{
 width: 90%;
}
video{
 width: 90%;
 height: 200px;
}
.main_right{
 float: right;
 width: 33%;
 height: 400px;
}
.main_right_top{
 float: right;
 width: 100%;
 height: 150px;
 background-color: white;
 border-radius: 20px;
 padding-left: 20px;
}
.main_right_top_main{
 width: 90%;
 height: 120px;
}
.main_right_top_top{
 width: 100%;
 height: 30px;
 border-bottom: 1px dashed #666;
}
.blu{
 color: blue;
}
.main_right_bottom{
 margin-top: 30px;
 float: right;
 width: 100%;
 height: 50px;
 background-color: white;
 border-radius: 20px;
 padding-left: 20px;
}
.main_right_bottom_text{
 height: 50px;
 line-height: 15px;
}
footer{
 color: white;
 width: 80%;
 height: 30px;
 line-height: 30px;
 margin: 10px auto;
}

style1.css

.search{
 position: absolute;
 top: 90px;
 left: 500px;
}

style2.css

.main_right{
 padding-left: 20px;
 margin-top: 10px;
 float: none;
 clear: both;
 width: 100%;
}
.main_left{
 clear: both;
 float: none;
 width: 100%;
}

style3.css

.search{
 display: none;
}

html代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/style1.css" media="screen and (max-width: 900px)" />
  <link rel="stylesheet" type="text/css" href="css/style2.css" media="screen and (max-width: 800px)" />
  <link rel="stylesheet" type="text/css" href="css/style3.css" media="screen and (max-width: 600px)" />
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 </head>
 <body>
  <header>
   <h1>博创华宇</h1>
   <div>专门从事h5的前端和移动开发培训的互联网公司</div>
   <div class="nav">
    <ul>
     <li>主页</li>
     <li>W3CShool</li>
     <li>H5之家</li>
     <li>CSS3教程</li>
    </ul>
    <div class="search"><input type="text" placeholder="Search" style="border-radius: 10px;" /></div>
   </div>
  </header>
  <main>
   <div class="main_left">
    <h2>响应式网站设计</h2>
    <img src="img/rwd2.png" style="width: 90%;" />
    <div class="main_left_text">
     响应式网站设计(Pesponsive Web design)的理念是：集中创建页面的图片和排版大小，
     可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
     响应式网站设计（Responsive Web design）的理念是：页面的设计与开发应当根据用户行为以及设备环境
     （系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面组成，
     包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是ipad，
     我们的页面都应该能够自动切换分辨率，图片尺寸及相关脚本功能等，以适应不同设备;换句话说，
     页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。
     这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
    </div>
    <h4>vimeo高清视频</h4>
    <div>
     <video controls="controls">
     </video>
    </div>
   </div>
   <div class="main_right">
    <div class="main_right_top">
     <div class="main_right_top_main">
      <div class="main_right_top_top">
       <h3>工具栏</h3>
      </div>
      <div class="main_right_top_top"><span class="blu">w3c</span>(3)</div>
      <div class="main_right_top_top"><span class="blu">w3c</span>(3)</div>
      <div><span class="blu">w3c</span>(3)</div>
     </div>
    </div>
    <div class="main_right_bottom">
     <h3 class="main_right_bottom_text">图片分享网站</h3>
    </div>
   </div>
  </main>
  <footer>博创华宇</footer>
 </body>
</html>