响应式布局

响应式布局是一种网页设计方法,使网页能够根据用户设备的屏幕尺寸、分辨率、方向(横屏/竖屏)等特性自动调整布局和内容,提供一致且优化的用户体验。其核心目标是"一次设计,多端适配"。

实现响应式布局核心技术:

  1. 布局方式:
  • 弹性盒子
  • 网格布局
  • 百分比布局
  • 单位可以借助vw实现
  1. 断点设置:
  • 根据常见的设备宽度设置断点
  • 手机 < 768px
  • 平板 768px ~ 1024px
  • PC > 1024px
  • 根据不同的设备宽度显示不同的布局样式

断点设置

断点设置的实现方法,有两种方式:1.媒体查询 或 2.第三方框架BootStrap

媒体查询是CSS3的一个强大功能,它允许开发者根据设备的特定特性(如屏幕的宽度、高度、方向、分辨率等)来应用不同的CSS样式。

javascript 复制代码
@media 媒体类型 and (媒体特征){
	/* 样式 */
}
  • @media:媒体查询的起始声明
  • 设备类型:媒体类型(可选),如screen、print等,省略默认 all
  • 媒体特征:如min-width、max-width等
javascript 复制代码
html {
	font-size: 200px; // 正常字体大小
}

// 当屏幕小于等于320px时,html文字大小修改17.066667px
@media screen and (max-width: 320px){
	html{
		font-size: 17.066667px;
	}
}

// 当屏幕大于等于540x,html文字大小修改28.8px
@media screen and (min-width: 540px){
	html{
		font-size: 28.8px;
	}
}
相关推荐
林强1814 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散6 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan6 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇7 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追8 小时前
Vue组件化开发
前端·html
艾德金的溪9 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长9 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH9 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴9 小时前
Android Studio新手开发第二十六天
android·前端·android studio