likes
comments
collection
share

【响应式布局】html+css+javascript知识【响应式布局】html+css+javascript知识。前端怎

作者站长头像
站长
· 阅读数 52

在前端开发中，一个常见的问题是当屏幕大小发生变化时，页面的布局和字体大小未能相应地调整，导致用户体验不佳。为了解决这个问题，我们需要引入响应式布局（Responsive Layout）的概念

什么是响应式布局

响应式布局（Responsive Layout）是一种网页设计技术，它能够使网站在不同尺寸和分辨率的设备上都能提供良好的用户体验。这种布局方式不仅限于CSS（层叠样式表）或HTML（超文本标记语言），而是需要HTML、CSS以及有时还需要JavaScript（JS）等技术的综合应用。

响应式布局的核心技术

  1. HTML：用于构建网页的骨架，包括页面的结构、内容等。在响应式布局中，HTML需要合理地划分内容区块，为CSS和JavaScript提供必要的标记。
  2. CSS：用于控制网页的布局、样式和外观。在响应式布局中，CSS通过媒体查询（Media Queries）等技术，根据不同的屏幕尺寸和分辨率应用不同的样式规则，从而实现布局的响应式调整。
  3. JavaScript（可选）：虽然JavaScript不是响应式布局所必需的，但它可以增强响应式布局的功能。例如，可以使用JavaScript来动态调整页面元素的大小、位置或行为，以适应不同设备的特性。

响应式布局的实现方式

具体内容

  1. 百分比布局：通过百分比单位（%）来定义元素的宽度和高度，使元素的大小能够随着父元素或视口（viewport）大小的改变而改变。
  2. 媒体查询（Media Queries） ：CSS3中引入的媒体查询功能允许根据不同的媒体类型和条件来应用不同的样式规则。在响应式布局中，媒体查询通常用于检测设备的屏幕尺寸或分辨率，并据此应用相应的样式。
  3. 弹性盒子布局（Flexbox） ：Flexbox是一种CSS布局模式，它为盒状模型提供了更大的灵活性。在Flexbox布局中，容器内的项目能够自动调整其大小以适应不同的屏幕尺寸。
  4. 视口单位（Viewport units） ：包括vw（视口宽度的百分比）、vh（视口高度的百分比）等，这些单位允许元素的大小与视口的大小相关联，从而实现响应式布局。
  5. REM和EM单位：REM（root em）和EM是相对单位，分别相对于根元素（html元素）和父元素的字体大小。通过调整根元素的字体大小，可以影响整个页面的布局和样式。

具体描述以及代码案例

原理

响应式的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewpoint

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

属性对应如下： width=device-width：自适应手机屏幕的尺寸宽度 maximum-scale：缩放比例的最大值 initial-scale：缩放的初始化 user-scalable：用户的可以缩放的操作

媒体查询

css中的增加更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表 使用 @Media 查询，可以针对不同的媒体类型定义不同的样式

@media screen and (max-width: 640px) {...}
媒体查询中设置根样式的方式

  1. :root 选择器：

    • :root 是一个伪类选择器，它匹配文档的根元素。在HTML文档中，:root 实际上就是 <html> 元素。
    • 使用 :root 定义的样式会应用于整个文档，包括 <html> 元素本身及其所有子元素。
    • 当你在 :root 中设置字体大小时，这通常是为了作为后续字体大小的基准（也称为“根字体大小”），以便使用相对单位（如 em 或 rem）时能够相对于这个大小进行调整。 示例：
    	:root {  
	  font-size: 16px; /* 默认字体大小 */  
	}  
	@media (max-width: 768px) {  
	  :root {  
	    font-size: 14px; /* 屏幕宽度小于768px时调整字体大小 */  
	  }  
	}

  2. html 选择器：

    • html 选择器直接作用于 <html> 元素，即文档的根元素。
    • 与 :root 类似，设置 html 的字体大小也会影响整个文档的字体大小（因为所有元素都是 <html> 的后代），但通常不会用于定义基准字体大小（这个用途留给 :root 更合适）。
    • 在某些情况下，你可能需要直接对 <html> 元素应用特定的样式，而不是仅仅设置字体大小。

    示例：

    	html {  
	  font-size: 16px; /* 默认字体大小 */  
	}  
	/* 媒体查询中的用法与 :root 类似，但通常不推荐这样使用 html 来定义基准字体大小 */

  3. body 选择器：

    • body 选择器作用于 <body> 元素，它是 <html> 的直接子元素，并包含了网页的可见内容（如文本、图片、链接等）。
    • 设置 body 的字体大小将影响 <body> 元素内部的所有内容的默认字体大小，但不会影响 <html> 元素本身或其他非 <body> 后代的元素的字体大小（除非它们特别指定了字体大小或继承了 body 的字体大小）。
    • 尽管可以在 body 中设置字体大小，但通常不建议将其作为整个文档的基准字体大小，因为这样做可能会限制后续对字体大小进行灵活调整的能力。

    示例：

    	body {  
	  font-size: 1rem; /* 假设 :root 的字体大小已经设置，这里使用 rem 以保持一致性 */  
	}  
	/* 媒体查询中通常不会直接改变 body 的字体大小作为响应式设计的一部分，  
	   而是会改变根字体大小，让 body 和其他元素通过继承或使用相对单位来响应 */

总结：

  • 使用 :root 来定义基准字体大小是最佳实践，因为它直接关联到文档的根元素，并为整个文档提供了一个一致的字体大小基准。
  • html 和 body 选择器也可以用于设置字体大小，但它们的作用范围和上下文有所不同，通常不会用于定义基准字体大小。
  • 在媒体查询中，通常会改变 :root 的字体大小来实现响应式布局，而其他元素则通过继承或使用相对单位来适应不同的屏幕尺寸。

百分比

通过百分比单位"%"来实现响应式的效果 比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果

  • height 、width 属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素:·子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
  • 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 width，而与父元素的height无关。
  • 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
  • border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度 可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式
.container { 
  width: 80%; /* 容器宽度为父元素宽度的80% */
  margin: 0 auto; /* 水平居中 */
  padding: 20px; /* 内边距 */
  } 
  
  /* 当屏幕宽度小于或等于768px时，调整样式 */ 
  @media (max-width: 768px) { 
    .container {
      width: 95%; /* 在小屏幕上，增加容器宽度以占用更多空间 */ 
      padding: 10px; /* 减少内边距以适应小屏幕 */ 
     } 
    } 
    
    /* 当屏幕宽度进一步减小到600px以下时，可以再次调整样式 */
    @media (max-width: 600px) {
      .container { 
        width: 100%; /* 在非常小的屏幕上，让容器宽度占满整个视口 */
        padding: 5px; /* 进一步减少内边距 */
       } 
      }

vw/vh

虽然CSS的媒体查询（Media Queries）通常不直接使用vw（视口宽度的百分比）或vh（视口高度的百分比）作为查询条件，但我们可以在媒体查询内部使用vw或vh单位来设置样式，从而间接地根据视口大小来调整布局。

不过，如果你的目标是基于视口大小（而非媒体特性的具体值，如min-width）来动态调整样式，并且想要模拟“通过vw/vh实现媒体查询”的效果，你可能需要结合使用CSS的变量（Custom Properties）和计算属性（calc()）来达到目的。但请注意，这并不是真正的“媒体查询”条件，而是一种响应式布局的技术。

然而，一个更实际的做法是，在媒体查询中设置一些断点，然后在这些断点内使用vw或vh单位来定义样式。这里有一个具体的代码案例：

	:root {  
	  --container-padding: 20px; /* 默认的内边距 */  
	}  
	.container {  
	  width: 80vw; /* 容器宽度为视口宽度的80% */  
	  padding: var(--container-padding); /* 使用CSS变量设置内边距 */  
	  margin: 0 auto; /* 水平居中 */  
	  box-sizing: border-box; /* 包含padding和border在width内 */  
	}  
	/* 当视口宽度小于或等于768px时，调整样式 */  
	@media (max-width: 768px) {  
	  .container {  
	    padding: calc(var(--container-padding) / 2); /* 减小内边距 */  
	  }  
	  /* 如果需要，也可以在这里调整.container的其他属性，如宽度 */  
	  /* 例如，.container { width: 95vw; } */  
	}  
	/* 当视口宽度进一步减小到600px以下时，再次调整样式 */  
	@media (max-width: 600px) {  
	  .container {  
	    padding: 10px; /* 直接设置更小的内边距，不再使用变量或计算 */  
	    width: 98vw; /* 几乎占满整个视口宽度 */  
	  }  
	}

rem

步骤概述

  1. 设置根元素的字体大小：首先，你需要为<html>元素设置一个基准字体大小。这个大小可以基于一个固定的值（如16px），但更常见的是使用视口宽度（vw）单位的一个比例来动态设置，以便在不同屏幕尺寸下自动调整。
  2. 使用rem单位：在你的CSS中，使用rem单位来设置元素的尺寸（如宽度、高度、边距等）。由于rem是相对于根元素的字体大小来计算的，因此当你调整根元素的字体大小时，所有使用rem单位的元素尺寸也会相应调整。
  3. 媒体查询调整根字体大小：通过媒体查询，你可以根据屏幕宽度或其他媒体特性来调整根元素的字体大小。这样，在不同的屏幕尺寸下，你就可以为整个网页设置不同的布局尺寸了。

示例代码

	/* 设置根元素的基准字体大小，这里使用视口宽度的6.25%作为基准（即100vw = 1600px时，html的font-size为100px） */  
	html {  
	  font-size: 6.25%; /* 假设设计稿宽度为1600px，则1rem = 10px */  
	}  
	/* 使用rem单位设置元素尺寸 */  
	.container {  
	  width: 80rem; /* 相当于800px */  
	  padding: 2rem; /* 相当于20px */  
	  margin: 0 auto;  
	}  
	/* 媒体查询调整根字体大小以实现响应式 */  
	@media (max-width: 1200px) {  
	  html {  
	    font-size: 5.625%; /* 在屏幕宽度小于或等于1200px时，减小基准字体大小 */  
	  }  
	}  
	@media (max-width: 768px) {  
	  html {  
	    font-size: 5%; /* 进一步减小基准字体大小以适应更小的屏幕 */  
	  }  
	}
转载自:https://juejin.cn/post/7418363736413388810
评论
请登录