WEB前端第十八课——媒体及meta viewport / 开普饭

1.media query响应式布局——媒体查询

　　使网页能够兼容多种终端显示，而不是为每个终端做特定的版本，提供更加舒适的界面和更好的用户体验

　　响应式布局设计比专门设计的手机版网站功能少，如获取用户GPS定位响应式设计很难实现，如果只是根据窗口大小为用户提供匹配的视觉效果还是优先选择响应式设计

　　优点：

　　　　① 面对不同分辨率设备灵活性强

　　　　② 能够快捷解决多设备显示适应问题

　　缺点：

　　　　① 兼容各种设备的工作量大，效率略慢

　　　　② （多终端兼容）代码累赘，会出现隐藏无用的元素，加载时间加长

　　　　③ 属于折中性质的设计解决方案，受多方面因素影响而达不到最佳效果

　　　　④ 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

2.@media语法格式

　　@media mediatype and|not|only (media feature) { CSS-Code; }

　　mediatype属性值：all（应用于所有设备）、print（用于打印机和打印预览）、screen（用于电脑屏幕、平板电脑、智能手机等）、speech（用于屏幕阅读器等发生设备）、tv（电视机类型的设备）

　　media feature常用属性值：

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

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

　　　　aspect-ratio，输出设备中的页面可见区域宽度与高度的比率

　　　　max-width，输出设备中的页面最大可见区域的宽度

　　　　max-height，输出设备中的页面最大可见区域的高度

　　　　max-aspect-ratio，输出设备中的页面可见宽度与高度的最大比率

　　　　min-width，输出设备中的页面最小可见区域的宽度

　　　　min-height，输出设备中的页面最小可见区域的高度

　　　　min-aspect-ratio，输出设备中的页面可见区域宽度与高度的最小比率

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

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

　　　　device-aspect-ratio，输出设备的屏幕可见宽度与高度的比率

　　　　max-device-width，输出设备的屏幕最大可见宽度

　　　　max-device-height，输出设备的屏幕最大可见高度

　　　　max-device-aspect-ratio，输出设备的屏幕可见宽度与高度的最大比率

　　　　min-device-width，输出设备的屏幕最小可见宽度

　　　　min-device-height，输出设备的屏幕的最小可见高度

　　　　min-device-aspect-ratio，输出设备的屏幕可见宽度与高度的最小比率

3.@media测试代码

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_transform</title>
    <meta name="viewport" content="initial-scale=1.0,width=device-width"/>
    <style>
        .box{
            margin: 0px auto;
        }
        @media screen and (min-width: 968px){
            .box{
                width: 946px;
            }
            .box>div{
                width: 229px;
                height: 275px;
                background-color: #e5e5e5;
                margin: 10px 10px 0 0;
                float: left;
            }
            .box>div:last-child{
                margin-right: 0px;
            }
        }
        @media screen and (min-width: 632px) and (max-width: 968px){
            .box{
                width: 468px;
            }
            .box>div{
                width: 229px;
                height: 275px;
                background-color: aqua;
                margin: 10px 10px 0 0;
                float: left;
            }
            .box>div:last-child,.box>div:nth-child(2){
                margin-right: 0px;
            }
        }
        @media screen and (max-width: 632px){
            .box{
                width: 250px;
            }
            .box>div{
                width: 250px;
                height: 300px;
                background-color: greenyellow;
                margin: 10px 0px 0 0;
                float: left;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

4.viewport 用户网页可视区域

　　针对移动网页优化的viewport meta标签：

　　width，控制viewport的大小，可以定义具体数值（如900px），也可以是特殊的值（如 device-width）

　　height，指定viewport高度，同理width

　　initial-scale，初始缩放比例，即第一次加载页面时的缩放比例

　　maximum-scale，允许用户缩放到的最大值

　　minimum-scale，允许用户缩放到的最小值

　　user-scalable，规定用户是否可以手动缩放　

5.meta元素，定义文档元数据（data about other data），主要用于描述信息资源和数据，便于计算机理解、检索和管理等

　　元数据的用途：

　　① 通过 name（需要定义的元数据名称）和 content（定义的内容或规则）属性定义名称/值对中的元数据，书写格式<meta name="参数名" content="参数值"/>

　　　预定义元数据类型：

　　　application name（当前网页所属Web应用程序的名称）、author（当前网页作者）、description（当前网页的描述）、generator（生成HTML的编辑器软件名称）、keywords（当前网页的搜索关键字）

　　　其他常用元数据类型：

　　　robots，定义网页索引范围，content参数包括：

　　　　　　none，文件和页面链接不允许查询，与“noindex, nofollow”作用相同

　　　　　　index，文件允许被检索（允许robot或spider登录）

　　　　　　follow，页面上的链接允许查询

　　　　　　noindex，文件不允许检索，但页面上的链接可以查询（禁止robot或spider登录）

　　　　　　nofollow，文件允许检索，但页面上的链接不可以查询（禁止robot或spider抓取网页链接往下追踪）

　　　　　　noarchive，禁止创建此页面的存档或缓存版本

　　　revisit-after，声明当前网页允许多长时间访问一次

　　　更多元数据扩展：http://wiki.whatwg.org/wiki/MetaExtensions

　　② meta第二个用途是声明字符集编码

　　　ASCII，第一个字符编码标准，定义了127个字母数字字符

　　　 ANSI，原始的Windows字符集，支持256种不同的字符代码

　　　 ISO-8859-1，HTML4的默认字符集，支持256种不同的字符代码

　　　 UTF-8（Unicode），HTML5默认字符集，涵盖了世界上几乎所有的字符和符号

　　③ meta另一个用途，通过http-equiv覆盖HTTP头之一的值，模拟来自服务器的HTTP标头

　　　语法格式：<meta http-equiv="refresh" content="3; http://www.www.baidu.com"/>

　　　常用属性值：refresh（设置页面重新加载的时间周期）、default-style（应用于此页面的首选样式表）、content-type（规定网页字符编码方式，②的替代方法）、……

6..multi-column 列布局，用于创建多个列对文本进行布局，属性：

　　column-count，定义元素分为多少列数，属性值为number

　　column-gap，定义列之间的间隔距离，单位px

　　column-rule，定义列之间分隔样式，如分割线、颜色等

　　　　　　　　可以分别设置，column-rule-width（分隔线宽度）、column-rule-style（分割线样式）、column-rule-color（分割线颜色）

　　column-width，定义每一列的宽度

　　注意：column-count属性只能分隔文本，不适用英文！

<html>
<head>
    <meta charset="utf-8">
    <title>CSS_column</title>
    <style>
        .text{
            width: 360px;
            height: 500px;
            background-color: #d5d5d5;
            border: 1px solid red;
            margin: 20px auto;
            /*text-wrap: normal;*/
            column-count: 3;
            column-gap: 30px;
            column-rule: 1px dashed #fe6a00;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="text">
        那样匆忙，看似那样繁华，却那样的沉重。不同的人却同样为各种生活各种理想打拼，希望在这个依然金钱化的社会拥有属于自己的一席之地，
        这应该是所有的人包括那些还未出生的孩子以后对生活的想法。把每个人由童心未泯机械化的改造为圆滑世故的俗人，这些并不是我们愿意的却必须面对的，
        让我意识到其实人才是最悲哀，最可怜的，被社会这个大圈子牵引着，改变着，一点点迷失自我，磨消了思想。被庸俗套上铐链，却一脸幸福的笑
    </div>
</body>
</html>

WEB前端第十八课——媒体及meta viewport

相关推荐