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">`

本文部分知识点来源于菜鸟教程笔记