Css(响应式布局以及标准头的设置)基础笔记（三）

响应式概念

    1.优雅降级(graceful degradation)

    2.渐进增强(progressive enhancement)

    3.布局视口

    4.可视视口

    5.理想视口

媒体查询

    media

            width 定义输出设备中的页面可见区域宽度

            height 定义输出设备中的页面可见区域高度

            device-width 定义输出设备的屏幕可见宽度

            device-height 定义输出设备的屏幕可见高度

            resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm    scan 定义电视类设备的扫描工序

    理想视口

            

    缩放比例

            

一般写法

        pc端      ------      media="screen and (min-width:1400px)"

        平板端   ------     media="screen and (min-width:640px) and (max-width:1399px)"

        移动端    ------      media="screen and (max-width:639px)"

link写法

        

判断横屏竖屏

@media screen and (orientation: portrait) { /*竖屏 css*/ }

@media screen and (orientation: landscape) { /*横屏 css*/ }

竖屏

横盘

标准头的设置

            视口 宽度等于设备宽度，初始缩放为1，最小缩放为一，最大缩放为一，禁止用户缩放

             忽略页面中的数字识别为电话号码

            以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面