媒体查询&响应式布局

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        /*
             媒体特性:
                width 视口(窗口)的宽度
                height 视口(窗口)的高度

                min-width 视口的最小宽度(视口大于指定宽度时生效)
                max-width 视口的最大宽度(视口小于指定宽度时生效)
         */
/* 
         样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化
         一般比较常用的断点

         小于768 超小屏幕 max-width=768px
         大于768 小屏幕   min-width=768px
         大于992 中型屏幕 min-width=992px
         大于1200 大屏幕  min-width=1200px

*/
         @media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }
    style>
head>
<body>
    
body>
html>
媒体类型
	   all              所有媒体
	   print            打印
	   screen           屏幕设备
	   
       braille          盲文触觉设备
       embossed    		盲文打印机
       speech           “听觉”类似的媒体设备
       tty              不适用像素的设备
       tv               电视
 
媒体特性
	min-width:窗口宽度大于设置值的时候识别
	max-width:窗口宽度小于设置值的时候识别
	orientation:portrait   :竖屏
	orientation:landscape:横屏
	-webkit-device-pixel-ratio:像素比
	device-width: 设备独立像素 (min/max)
	device-height: 	(min/max)
关键字
	and
    and 操作符用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为真,它还用于将媒体功能与媒体类型结合在一起。

    not
    not运算符用于否定媒体查询,如果不满足这个条件则返回true,否则返回false。 如果出现在以逗号分隔的查询列表中,它将仅否定应用了该查询的特定查询。 如果使用not运算符,则还必须指定媒体类型。

    注意:在Level 3中,not关键字不能用于否定单个媒体功能表达式,而只能用于否定整个媒体查询。

    only
    only运算符仅在整个查询匹配时才用于应用样式,并且对于防止较早的浏览器应用所选样式很有用。 当不使用only时,旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen,忽略查询的其余部分,并将其样式应用于所有屏幕。 如果使用only运算符,则还必须指定媒体类型。

    , (逗号)
    逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此,如果列表中的任何查询为true,则整个media语句均返回true。 换句话说,列表的行为类似于逻辑或or运算符。

/*width:浏览器窗口的尺寸(min max)
* min-width:800px >=800px
* max-width:800px <=800px
*
*device-width:设备独立像素(min max)
* pc端:分辨率
* 移动端:具体看机器的参数
*
* device-pixel-ratio(必须加-webkit-前缀),(min max)
* pc端:1
* 移动端:具体看机器的参数
*
*
* */

你可能感兴趣的:(CSS,媒体查询,响应式布局,css)