WEB前端第十八課——媒體及meta viewport

時間 2020-08-06

標籤 web 前端第十八媒體 meta viewport 欄目 HTML 简体版

原文原文鏈接

1.media query響應式佈局——媒體查詢html

　　使網頁可以兼容多種終端顯示，而不是爲每一個終端作特定的版本，提供更加溫馨的界面和更好的用戶體驗緩存

　　響應式佈局設計比專門設計的手機版網站功能少，如獲取用戶GPS定位響應式設計很難實現，若是隻是根據窗口大小爲用戶提供匹配的視覺效果仍是優先選擇響應式設計服務器

　　優勢：app

　　　　① 面對不一樣分辨率設備靈活性強編輯器

　　　　② 可以快捷解決多設備顯示適應問題ide

　　缺點：佈局

　　　　① 兼容各類設備的工做量大，效率略慢測試

　　　　② （多終端兼容）代碼累贅，會出現隱藏無用的元素，加載時間加長優化

　　　　③ 屬於折中性質的設計解決方案，受多方面因素影響而達不到最佳效果網站

　　　　④ 必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況

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，定義每一列的寬度

<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;
        }
    </style>
</head>
<body>
    <div class="text">
        bai那樣匆忙，看似那樣繁華，卻那樣的沉重。不一樣的人卻一樣爲各類生活各類理想打拼，但願在這個依然金錢化的社會擁有屬於本身的一席之地，
        這應該是全部的人包括那些還未出生的孩子之後對生活的想法。把每一個人由童心未泯機械化的改造爲圓滑世故的俗人，這些並非咱們願意的卻必須面對的，
        讓我意識到其實人才是最悲哀，最可憐的，被社會這個大圈子牽引着，改變着，一點點迷失自我，磨消了思想。被庸俗套上銬鏈，卻一臉幸福的笑
    </div>
</body>
</html>

相關標籤/搜索

web後端(十八)