rem布局注意问题和meta标签

最新推荐文章于 2025-04-03 13:41:05 发布

前端的艺术

最新推荐文章于 2025-04-03 13:41:05 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HW0007/article/details/105062875

本文详细介绍如何在移动端使用rem布局进行响应式设计，包括通过document.body.clientWidth或window.screen.width获取设备宽度的方法，并设置html元素的字体大小作为基准。同时，深入解释了meta标签的使用，特别是name=viewport属性在移动端显示优化中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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