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

响应式概念

    1.优雅降级(graceful degradation)

    2.渐进增强(progressive enhancement)

    3.布局视口

    4.可视视口

    5.理想视口

媒体查询

    media

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

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

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

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

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

    理想视口

            <meta name="viewport" content="width=device-width"/>

    缩放比例

            <meta name="viewport" content="width=device-width minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

一般写法

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

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

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

link写法

        <rel="stylesheet" media="(max-width:480px)" href="style.css">

判断横屏竖屏

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

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

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">竖屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">横盘

标准头的设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

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

<meta name="format-detection" content="telephone=no"/>

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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