响应式布局—媒介查询

一.为什么要响应式布局

移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错

二.响应式布局的实现方式

主要通过媒介查询来实现
媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。

三媒介查询的讲解

*使用方法

1. 通过写媒介查询的外部样式：

    <link rel="stylesheet" href="index.css" media="screen and (max-width:800px) ">

2.通过css样式中@media来实现

div{
   height: 200px;
   width: 200px;
   background-color: red;
}
@media (max-width:800px){
   div{
       height: 100px;
       width: 100px;
       background-color: yellow;

   }
}

常见的媒介类型

媒体特性

• 媒介查询中常用的逻辑操作符
  and与操作
  ,或操作
  not 非操作
  only，它用于向早期浏览器隐藏媒体查询。类似于not，该关键字必须位于声明的开头

@media (max-width:800px)and (min-width:100px){
    div{
        height: 100px;
        width: 100px;
        background-color: yellow;

    }
    @media screen and (max-width:800px)and (min-width:100px), print and (min-width:6in){
    div{
        height: 100px;
        width: 100px;
        background-color: yellow;

    }
}
 @media not screen and (monochrome) 
{
    div{
        height: 100px;
        width: 100px;
        background-color: yellow;

    }

 @media only screen and (monochrome) 
{
    div{
        height: 100px;
        width: 100px;
        background-color: yellow;

    }

总结

写不动了，做条懒狗