前端响应式布局解决方案分享

已于 2024-08-10 17:21:12 修改
阅读量579 收藏 9
点赞数 8
文章标签： 前端
于 2024-08-10 17:20:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dfc_dfc/article/details/141093464
版权

在前端开发中，响应式布局解决方案主要用于确保网站或应用程序在不同设备上（如桌面、平板、手机等）能够以最佳方式呈现，并且能够适应不同的屏幕尺寸和分辨率。今天的内容主要是想和大家分享一些功能强大的 CSS 布局，应用于项目的开发。以下是一些常用的响应式布局解决方案：

  1. 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逻辑操作符，用于结合多个媒体类型或特性，实现更复杂的查询条件。
      • 常见媒体特性
      1. 宽度和高度特性
        - width: 目标输出设备的视口宽度。
        - min-width: 视口宽度的最小值。
        - max-width: 视口宽度的最大值。
        - height: 目标输出设备的视口高度。
        - min-height: 视口高度的最小值。
        - max-height: 视口高度的最大值。
      2. 分辨率和像素比
        - device-width 和 device-height: 设备的屏幕物理宽度和高度。
        - min-device-width 和 max-device-width: 设备屏幕物理宽度的最小值和最大值。
        - min-device-height 和 max-device-height: 设备屏幕物理高度的最小值和最大值。
        - resolution: 设备的分辨率，可以是dpi（每英寸点数）, dpcm（每厘米点数）或 dppx（每像素点数）。
        - min-resolution 和 max-resolution: 分辨率的最小值和最大值。
      3. 方向和比例
        - orientation: 设备的方向，取值为portrait（竖屏）或landscape（横屏）。
        - aspect-ratio: 输出设备的宽高比，格式为x/y。
        - device-aspect-ratio: 设备的屏幕宽高比。
      4. 颜色和颜色索引
        - color: 设备的颜色位数。
        - min-color 和 max-color: 设备颜色位数的最小值和最大值。
        - color-index: 设备的颜色索引数。
        - min-color-index 和 max-color-index: 设备颜色索引数的最小值和最大值。
      5. 环境和设备特性
        - monochrome: 单色设备的颜色位数。
        - grid: 是否为网格设备，如终端。
        - scan: 显示设备的扫描方式，如progressive（逐行扫描）或interlace（隔行扫描）。
        - update-frequency: 显示更新频率，如slow或fast。
      6. 其他特性
        - 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;
  }
}
  2. 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>
  3. 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>
  4. 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>
  5. CSS Frameworks

    • 描述：类似于 Bootstrap 的其他 CSS 框架，如Foundation、Tailwind CSS、Material-UI等，提供了类似的响应式网格系统和组件库，但可能具有不同的设计理念和使用方式。

    • 优势：提供了更多样化的选择，可以根据项目需要选择最合适的框架。

    • 适用场景：CSS框架是预编写的CSS代码，提供一套现成的样式和布局模板，用于快速开发网站或Web应用的界面。

    • 样例：使用 Tailwind CSS 的类创建响应式布局

      • Tailwind CSS使用指南

        • 安装
          // 采用“将 Tailwind CSS 作为 PostCSS 插件安装”的方式使用
// 其他方式可参考官网：https://tailwind.nodejs.cn/docs/installation

npm 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 = false

new 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框架提供了非常丰富的原子类，每个类都代表一个具体的样式属性。在开发过程中需要结合官网中定义的类，因此初次上手开发时会有一定的时间成本，好的地方在于能够保持一套完整的样式规范。
诸葛亮的芭蕉扇
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最全的前端项目中自适应布局和响应式布局解决方案
2301_78320134的博客
06-28 1224
​ 自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式，它为不同的屏幕分辨率定义了不同的布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。当屏幕分辨率发生变化时，页面中元素的位置会变化而大小不会变，从而保持在不同渲染设备下浏览效果的最优化，给用户一致的浏览体验。然而，自适应布局的劣势在于，为了适应不同的设备，同一个页面往往需要开发不同页面，会增加成本，尤其当页面需求发生变化时，会涉及多套代码的改动 ​
前端响应式布局
weixin_42382758的博客
06-09 1304
在pc端做个案例： 【500， 800】px一行一个div , 【801， 1000】第一行两个，第二行放1个， 【1001，无穷】一行三个div。响应式设计和自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，展现不同的布局和内容。自适应需要开发多套界面，通过检测视口分辨率，判断当前访问的设备是PC端、平板、手机，从而请求服务层返回不同的页面。不同尺寸设置不同css样式，移动用的多，pc不多。/* 不同的div设置不同颜色 *//* 设置不同尺寸的style */
前端响应式布局方式及其优缺点大全
qq_39454432的博客
04-12 1137
前端响应式布局方式及其优缺点大全
前端响应式布局原理与方案（详细版）
热门推荐
大灰狼的小绵羊哥哥的博客
04-08 5万+
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。 响应式设计与自适应设计的区别：响应式开发...
前端实现响应式布局的几种方法
DDDHL_的博客
03-19 9225
分享一下常用的响应式布局方法，flex布局、百分比布局、rem布局、媒体查询、自适应布局
前端响应式布局详解
weixin_46663768的博客
05-01 1108
前端响应式布局原理与方案（详细版） 引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。 响应式设计...
前端响应式布局原理与实践
qq_42002487的博客
03-06 902
前言 作为一个前端开发者，响应式网站开发是必备技能之一。响应式有它的很好的优点，也有它一定的缺点。这就需要我们在开发的时候做出取舍。对于内容较少、主要为展示类网站，故采用响应式；对于内容多，管理类的网站采用分开开发的方式，不同设备采用不同的一套代码。本文会主要探讨响应式布局原理和技巧，并结合实例来加深印象。 响应式与自适应 我们很多人其实把这响应式和自适应两种网站当成一回事，但事实上这两种网站的布...
响应式布局实现方案
qq_43733907的博客
04-20 2020
响应式布局，viewport，ui框架实现响应式
CSS3响应式布局中常见的问题及解决方案
aronSandy的博客
04-18 468
同时，随着前端技术的不断发展，未来还将有更多的技术和工具来帮助我们实现更加高效、灵活的响应式布局。此外，随着前端框架和组件库的不断发展，如React、Vue、Angular等，它们也为我们提供了丰富的响应式组件和工具，使得我们可以更加高效地构建响应式应用。同时，随着前端技术的不断发展，我们也将迎来更多的机遇和挑战。同时，我们也需要保持对新技术和新方法的关注，以便在响应式设计的道路上不断前行，为用户提供更加出色的体验。因此，应简化导航菜单的结构和层级，减少表单的输入框和按钮数量，以提高用户的操作便利性。
实现响应式布局有几种方法
青春木鱼的博客
11-29 4584
响应式布局有的方法有：1、媒体查询；2、百分比【%】；3、vw或vh，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度；4、rem单位是相对于字体大小的html元素；5、flex弹性布局。
前端响应式网站开发模板
07-07
在"前端响应式网站开发模板"中，我们可以看到一些关键的技术和概念被应用，这些包括： 1. **REM单位**：REM（Root EM）是以根元素（通常是html元素）的字体大小为基准的长度单位。在响应式设计中，使用REM可以使...
数字解决方案图片展示响应式网页模板
01-22
这种模板的核心特性是其响应式布局，能够根据用户所使用的设备自动调整页面元素的大小和排列方式，保持内容的清晰可读和视觉一致性。 响应式设计是现代网页开发的关键组成部分，它基于Flexbox或Grid CSS布局技术，...
城市工业解决方案展示响应式网站模板
01-21
城市工业解决方案展示响应式网站模板是一种专为呈现城市工业化进程中的解决方案而设计的网页模板，其特点是具有高度的适应性和视觉吸引力。响应式设计意味着该模板可以自动调整布局，无论在桌面、平板还是手机等不同...
响应式风景前端网站模板
04-02
总结来说，“响应式风景前端网站模板”是一个结合了现代前端技术、优秀设计原则和用户体验优化的解决方案，旨在为用户提供无论何时何地都能愉快浏览的风景主题网站。通过熟练掌握相关技术和设计理念，开发者可以打造...
bootsrtap 响应式布局前端框架
07-11
总的来说，Bootstrap提供了一套完整的解决方案，包括响应式布局、UI组件、JavaScript插件和易用的定制工具。它极大地简化了前端开发流程，使得开发人员能够专注于业务逻辑，而不是基础的页面布局和样式。在"beyond ...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 384
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
最新发布
深蓝浅蓝的天
08-09 817
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 555
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 265
vue实现放大缩小，拖动盒子完整代码付效果图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值