rem布局注意問題和meta標簽

使用rem前的准備：

• 如果是移動端，添加name="viewport"的meta標簽，其中的屬性數值根據實際需求而定：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

rem布局：

兩個常用方法：（視情況選其一使用）

• 通過document.body.clientWidth獲取網頁可見區域的寬度,
• 通過window.screen.width獲取設備寬度

<script>
     var offWidth = window.screen.width;    // 獲取設備寬度
  //  通常把設計稿按照1rem =100px設置，好換算，假設設計稿寬度為移動端的375px，換算如下：
     document.getElementsByTagName("html")[0].style.fontSize = offWidth*（100/375）+ 'px';         //把轉換的值賦值給頂級標簽html的font-size屬性（即1rem的標准參考物）

     console.log('offWidth:'+offWidth,document.getElementsByTagName("html")[0].style.fontSize)
</script>

meta標簽詳解和常用屬性

• 概念： 標簽提供了 HTML 文檔的元數據。元數據不會顯示在客戶端，但是會被瀏覽器解析。詳細請點：
  它根據name的不同，提供各種功能。
• 常用屬性：
  1. name="viewport" 用於移動端顯示優化（通常直接復制下面代碼使用即可）深入理解viewport
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     * content里的屬性：
     width 設置layout viewport 的寬度，為一個正整數，或字符串"width-device"
     initial-scale 設置頁面的初始縮放值，為一個數字，可以帶小數
     minimum-scale 允許用戶的最小縮放值，為一個數字，可以帶小數
     maximum-scale 允許用戶的最大縮放值，為一個數字，可以帶小數
     height 設置layout viewport 的高度，這個屬性對我們並不重要，很少使用
     user-scalable 是否允許用戶進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
  2. 移動端其他優化：

<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->

3. 描述、搜索優化：
     實例 1 - 定義文檔關鍵詞，用於搜索引擎：
    `<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">`
    實例 2 - 定義web頁面描述：
     `<meta name="description" content="Free Web tutorials on HTML and CSS">`
    實例 3 - 定義頁面作者：
    `<meta name="author" content="Hege Refsnes">  `
    實例 4 - 每30秒刷新頁面：
    `<meta http-equiv="refresh" content="30">`

本文部分知識點來源於菜鳥教程筆記