移动设备&Media Queries,适应移动设备大小

viewport设置适应移动设备屏幕大小

• 为了解决移动版的屏幕分辨率大小，专门定义了虚拟窗口，并自定义窗口的大小或缩放功能
  -Android Browser浏览器的默认值事800像素；
• IE浏览器的默认值是974像素
• Opera浏览器的默认值是850像素
• viewport的用法

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0/>
//主要作用是自定义虚拟窗口，并指定虚拟窗口width宽度为device-width，初始缩放比例大小1倍，同时不允许用户使用手动缩放功能

• width:指定虚拟窗口的屏幕大小
• height:指定虚拟窗口的屏幕高度大小
• initial-scale指定初始缩放比例
• minimum-scale指定允许用户缩放的最小比例
• maximum-scale指定允许用户缩放的最小比例
• user-scalable指定是否允许手动缩放
  Media Queries
  要实现这个模块，需要在head标签内导入一个css样式文件，下面的定义当前屏幕可视区域的宽度最大值为600像素时要用的

<link rel="stylesheet" media="screen and(max-width:600ox)" href="small.css" />
//下面时在css文件中要写的内容
            @media screen and(max-width:600px){
            .dema{
            background-color:#ccc;

                }

        }

• 下面的定义当前屏幕可视区域的宽度在600-900像素时要用的

    <link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900ox)" href="small.css" />
    //下面时在css文件中要写的内容
            @media screen and(min-width:600px) and(max-width:900px){
            .dema{
            background-color:#ccc;

                }

        }

当手机处于横向，纵向的时候

//纵向
<link rel="stylesheet" media="all and(orientation:portrait)" href="porttrait.css" />
//横向
<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css" />

Media Queries语法总结

@media[media_query] media_type and media_feature
/*使用这个模块的时候必须@media方式开头 media_query 表示查询关键字，在这里可以使用not关键字和only关键字，not关键字表示对后面的样式表达式执行取反的操作*/

media_type允许定义的10种设备类型