前端响应式布局解决方案分享
在前端开发中，响应式布局解决方案主要用于确保网站或应用程序在不同设备上（如桌面、平板、手机等）能够以最佳方式呈现，并且能够适应不同的屏幕尺寸和分辨率。今天的内容主要是想和大家分享一些功能强大的 CSS 布局，应用于项目的开发。以下是一些常用的响应式布局解决方案：
-
CSS 媒体查询
-
描述： 使用 CSS 的
@media查询来根据不同的屏幕尺寸应用不同的样式。 -
优势： 简单直观，原生支持，适用于基本的响应式需求。
-
使用场景： 屏幕尺寸差异较大的设备，如桌面显示器、笔记本、平板和手机； 需要根据屏幕宽度调整布局的网站或应用等。
-
基础语法：
@media media-type and (media-feature: value) {/* CSS 样式规则 */ }属性 值 media-type 定义媒体类型，如 screen（用于电脑屏幕、手机屏幕等）、print（用于打印）、speech（用于屏幕阅读器）。默认值为 all，意味着规则适用于所有类型的媒体。 media-feature 媒体特性，用来检查设备的特定条件，比如视口宽度(width)、高度(height)、设备像素比(device-pixel-ratio)、颜色(color)等，这些特性允许你根据不同的设备条件和环境来定制样式。 value 媒体特性所对应的值或范围 and, not, only 逻辑操作符，用于结合多个媒体类型或特性，实现更复杂的查询条件。 - 常见媒体特性
- 宽度和高度特性
- width: 目标输出设备的视口宽度。
- min-width: 视口宽度的最小值。
- max-width: 视口宽度的最大值。
- height: 目标输出设备的视口高度。
- min-height: 视口高度的最小值。
- max-height: 视口高度的最大值。 - 分辨率和像素比
- device-width 和 device-height: 设备的屏幕物理宽度和高度。
- min-device-width 和 max-device-width: 设备屏幕物理宽度的最小值和最大值。
- min-device-height 和 max-device-height: 设备屏幕物理高度的最小值和最大值。
- resolution: 设备的分辨率，可以是dpi（每英寸点数）, dpcm（每厘米点数）或 dppx（每像素点数）。
- min-resolution 和 max-resolution: 分辨率的最小值和最大值。 - 方向和比例
- orientation: 设备的方向，取值为portrait（竖屏）或landscape（横屏）。
- aspect-ratio: 输出设备的宽高比，格式为x/y。
- device-aspect-ratio: 设备的屏幕宽高比。 - 颜色和颜色索引
- color: 设备的颜色位数。
- min-color 和 max-color: 设备颜色位数的最小值和最大值。
- color-index: 设备的颜色索引数。
- min-color-index 和 max-color-index: 设备颜色索引数的最小值和最大值。 - 环境和设备特性
- monochrome: 单色设备的颜色位数。
- grid: 是否为网格设备，如终端。
- scan: 显示设备的扫描方式，如progressive（逐行扫描）或interlace（隔行扫描）。
- update-frequency: 显示更新频率，如slow或fast。 - 其他特性
- any-hover: 检测是否有任何指针设备能悬停。
- any-pointer: 指针精度，如fine、coarse或none。
- hover: 指针是否能悬停。
- pointer: 主要输入设备的精度。
- inverted-colors: 用户是否启用了颜色反转。
- prefers-color-scheme: 用户偏好颜色方案，如light、dark或no-preference。
- prefers-reduced-motion: 用户是否偏好减少动画或运动。
- prefers-contrast: 用户的对比度偏好，如no-preference、high或low。
-
样例：
-
宽度
<!-- 屏幕 设备 断点超小屏幕 手机 <768px小屏幕 平板 >=768px ~ <992px 中等屏幕 桌面 >=992px ~ <1200px大屏幕 桌面 >=1200px --> // 为宽度小于等于768px的设备设置特定样式（ 通常被认为是手机或超小屏幕设备的范围 ） @media screen and (max-width: 768px) {/* CSS 样式规则 */ } // 介于768px到992px之间的设备设置特定样式（ 通常被认为是 平板电脑(平板)） @media screen and (min-width: 768px) and (max-width: 992px) {/* CSS 样式规则 */ } -
分辨率
/* 屏幕宽度小于400px时 */ @media screen and (max-device-width: 400px) {/* 在这里写你要应用的样式 */body {background-color: lightblue;} } -
方向
/* 纵向方向（竖屏） */ @media screen and (orientation: portrait) {body {/* 在竖屏时的样式 */background-color: lightblue;} }/* 横向方向（横屏） */ @media screen and (orientation: landscape) {body {/* 在横屏时的样式 */background-color: lightgreen;} } -
颜色
// 根据颜色主题调整样式/* 默认样式 */ body {background-color: white; /* 默认背景色 */color: black; /* 默认文本颜色 */ }/* 暗色模式 */ @media (prefers-color-scheme: dark) {body {background-color: black; /* 暗色模式背景色 */color: white; /* 暗色模式文本颜色 */} }/* 浅色模式 */ @media (prefers-color-scheme: light) {body {background-color: white; /* 浅色模式背景色 */color: black; /* 浅色模式文本颜色 */} } -
设备特性
// 使用CSS定义网格布局 .grid-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px; }// 当屏幕宽度较小时，你可以让网格布局变成单列显示 @media (max-width: 768px) {.grid-container {grid-template-columns: 1fr;} } -
其他特性
// 设备是否是触摸屏来应用不同的CSS样式，可以使用pointer媒体查询。 // 当设备是触摸屏时，可以调整链接的大小或者其他元素的样式 @media (pointer: coarse) {/* 触摸屏设备 */.button {padding: 15px 30px;} }@media (pointer: fine) {/* 非触摸屏设备（例如鼠标） */.button {padding: 10px 20px;} }
-
-
-
Flexbox 布局
-
描述：使用 CSS 的 Flexbox 布局模型来实现弹性布局，方便在不同屏幕尺寸下对内容进行重新排列和调整。
-
优势：强大的布局能力，适用于复杂的布局结构。
-
适用场景：现代化布局，适用场景广泛
-
样例
-
均分宽度，中间间距20px
<template><div class="layout"><div class="container"><div class="left"></div><div class="right"></div></div></div> </template> <style lang="less" scoped> .layout {height: 100%;width: 100%;display: flex;.container {margin: auto;height: 80%;width: 80%;background-color: pink;display: flex;.left {height: 100%;flex: 1;background-color: #eee;margin-right: 20px;}.right {height: 100%;flex: 1;background-color: #eee;}} } </style> -
居中
<template><div class="layout"><div class="container"></div></div> </template><style lang="less" scoped> .layout {height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;.container {height: 80%;width: 80%;background-color: pink;} } </style> -
上中下布局，底部高度固定，顶部高度不固定，中间高度自动铺满
<template><div class="layout"><div class="top">top<!-- <div class="top-height-100"></div> --></div><div class="content">content</div><div class="footer">footer</div></div> </template><style lang="less" scoped> .layout {height: 100%;width: 100%;display: flex;flex-direction: column;.top {flex: none; /* 不固定顶部高度 */margin-bottom: 12px;background-color: #f0f0f0;.top-height-100 {height: 100px;}}.content {flex: 1; /* 自动铺满剩余高度 */background-color: #e0e0e0;}.footer {height: 60px;margin-top: 12px;background-color: #ccc;// flex-shrink: 0;/* 不允许底部高度收缩 */flex: none; /* 不允许收缩 */}} </style>
-
-
-
CSS Grid 布局
-
描述：使用 CSS 的 Grid 布局模型，可以更精细地控制布局和项目在网格中的排列方式。
-
优势：提供了更复杂的网格布局能力，支持多列和多行布局。
-
适用场景：适用于那些需要复杂、多样化和响应式布局的项目，提供了强大的工具来精确地定义和控制网页布局的各个方面。
-
样例：
-
创建一个二列布局，左边固定宽度，右边自适应
<template><div class="layout"><div class="left"></div><div class="right"></div></div> </template> <style lang="less" scoped> .layout {height: 100%;width: 100%;display: grid;grid-template-columns: 200px auto; /* 左边200px，右边自适应 */.left {background-color: #eee;}.right {background: pink;} } </style> -
创建一个三列布局，中间列宽固定，两侧列自适应宽度
<template><div class="layout"><div class="left"></div><div class="middle"></div><div class="right"></div></div> </template><style lang="less" scoped> .layout {height: 100%;width: 100%;display: grid;grid-template-columns: auto 200px auto;.left {background-color: #eee;}.right {background: #eee;}.middle {background-color: pink;} } </style> -
创建一个三行布局，第一行高度不定，底部高度固定60px，中间高度铺满
<template><div class="layout"><div class="top"><div class="top-height-100"></div></div><div class="content"></div><div class="footer"></div></div> </template><style lang="less" scoped> .layout {height: 100%;width: 100%;display: grid;grid-template-rows: auto 1fr 60px;.top {background-color: lightblue;.top-height-100 {height: 100px;}}.content {background-color: #eee;}.footer {background: pink;} } </style> -
多行卡片布局，每个卡片固定大小，上下间距为30px的布局
<template><div class="layout"><div class="item" v-for="i in 28" :key="i"></div></div> </template><style lang="less" scoped> .layout {height: 100%;width: 100%;display: grid;grid-template-columns: repeat(auto-fill, 298px);grid-gap: 30px;justify-content: space-between;overflow-y: auto;background-color: #eee;grid-auto-rows: 80px;/* 卡片固定高度为80px */grid-gap: 30px 30px;/* 水平和垂直间隔分别为30px */.item {background-color: pink;} } </style>
-
-
-
UI开源框架（ant Design、Element、Bootstrap等）
-
描述：基于 HTML、CSS 和 JavaScript 最流行的开源框架，提供了响应式网格系统和一套预定义的 CSS 类来帮助构建响应式布局。
-
优势：快速开发，易于学习和使用，提供了大量的组件和工具。
-
样例：Elementui利用网格系统可以轻松创建响应式布局。
-
安装
npm i element-ui -S -
引入
// 在 main.js 中写入以下内容：import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App) }); -
使用
<template><div class="layout"><el-row v-for="ele in 10" :key="ele" type="flex" justify="space-between"><el-col :span="5"><div class="grid-content bg-purple"></div></el-col><el-col :span="5"><div class="grid-content bg-purple"></div></el-col><el-col :span="5"><div class="grid-content bg-purple"></div></el-col><el-col :span="5"><div class="grid-content bg-purple"></div></el-col></el-row></div> </template><style lang="less" scoped> .layout {height: 100%;width: 100%; } .el-row {margin-bottom: 20px;&:last-child {margin-bottom: 0;} }.el-col {border-radius: 4px; }.bg-purple-dark {background: #99a9bf; }.bg-purple {background: #d3dce6; }.bg-purple-light {background: #e5e9f2; }.grid-content {border-radius: 4px;min-height: 36px; }.row-bg {padding: 10px 0;background-color: #f9fafc; } </style>
-
-
-
CSS Frameworks
-
描述：类似于 Bootstrap 的其他 CSS 框架，如Foundation、Tailwind CSS、Material-UI等，提供了类似的响应式网格系统和组件库，但可能具有不同的设计理念和使用方式。
-
优势：提供了更多样化的选择，可以根据项目需要选择最合适的框架。
-
适用场景：CSS框架是预编写的CSS代码，提供一套现成的样式和布局模板，用于快速开发网站或Web应用的界面。
-
样例：使用 Tailwind CSS 的类创建响应式布局
-
Tailwind CSS使用指南
-
安装
// 采用“将 Tailwind CSS 作为 PostCSS 插件安装”的方式使用 // 其他方式可参考官网：https://tailwind.nodejs.cn/docs/installationnpm install -D tailwindcss postcss autoprefixer// 创建 tailwind.config.js 文件 npx tailwindcss init -
将 Tailwind 添加到你的 PostCSS 配置中
// 将 tailwindcss 和 autoprefixer 添加到你的 postcss.config.js 文件，或者在你的项目中配置 PostCSS 的任何地方。// postcss.config.js module.exports = {plugins: {tailwindcss: {},autoprefixer: {},} } -
配置模板路径
// 在 tailwind.config.js 文件中添加所有模板文件的路径。/** @type {import('tailwindcss').Config} */ module.exports = {content: ["./src/**/*.{vue,html,js}"],theme: {extend: {},},plugins: [], } -
将 Tailwind 指令添加到你的 CSS
// 将每个 Tailwind 层的 @tailwind 指令添加到你的主 CSS 文件中。// main.css @tailwind base; @tailwind components; @tailwind utilities; -
引入
import Vue from 'vue' import App from './App.vue' import './assets/css/index.css'; // 引入主样式文件Vue.config.productionTip = falsenew Vue({render: h => h(App), }).$mount('#app') -
其他样式配置：参考官网介绍，根据具体需要进行设置（https://tailwind.nodejs.cn/docs/aspect-ratio）
-
创建一个三行布局，第一行高度不定，底部高度固定60px，中间高度铺满
<template><div id="app"><div class="flex flex-col h-screen"><!-- 上部分，最小高度40px --><div class="flex-none bg-gray-200">上部分内容</div><!-- 中间部分，占满剩余空间 --><div class="flex-grow bg-gray-300">中间部分内容</div><!-- 底部部分，固定高度60px --><div class="flex-none h-16 bg-gray-400">底部部分内容</div></div></div> </template><style> body, html {height: 100%;width: 100%;padding: 0 !important;margin: 0 !important; } #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;height: 100%;width: 100%; } </style> -
创建多行四列，每一行两端对齐，卡片固定大小的布局
<template><div id="app"><div class="w-full grid grid-cols-4 gap-6 mb-6"><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div></div><div class="w-full grid grid-cols-4 gap-6 mb-6"><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div></div><div class="w-full grid grid-cols-4 gap-6 mb-6"><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div></div><div class="w-full grid grid-cols-4 gap-6"><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div><div class="card-container"><div class="card p-6 bg-white shadow-md rounded-lg h-20"></div></div></div></div> </template><script> export default {name: "App",components: {}, }; </script><style> body, html {height: 100%;width: 100%;padding: 0 !important;margin: 0 !important; } #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;height: 100%;width: 100%;background-color: #f7f7f7;overflow: auto; } </style>
-
-
总结
- 媒体查询关注于适应不同设备的布局和样式调整；Flexbox和CSS Grid是用于更有效地布局和对齐元素的技术，适用于不同类型的布局需求；UI开源框架提供了完整的UI组件和样式库，适合构建复杂的用户界面；CSS框架提供了基础的CSS样式和工具，用于快速搭建和定制UI。
- 媒体查询、Flexbox和CSS Grid上手会更容易一些，可以根据需求快速实现；UI 开源框架一般在项目中都会引入，可以结合前者一起使用；CSS框架提供了非常丰富的原子类，每个类都代表一个具体的样式属性。在开发过程中需要结合官网中定义的类，因此初次上手开发时会有一定的时间成本，好的地方在于能够保持一套完整的样式规范。
-
-