前端学习笔记

响应式H5 在头部添加

<meta name="viewport" content="width=device-width, initial-scale=1">

拓展阅读：https://blog.csdn.net/u012402190/article/details/70172371

样式相应

存在6种属性

参数名称	参数描述
min-width	视窗宽度大于或等于指定值时
max-width	视窗宽度小于或等于指定值时
min-height	视窗高度大于或等于指定值时
max-height	视窗高度小于或等于指定值时
orientation=portrait	视窗高度大于或等于宽度时
orientation=landscape	视窗宽度大于高度时

使用方式

方法 1，使用 link 标签，根据指定特性引入特定的外部样式文件

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">

方法 2，直接在 style 标签或 样式文件内使用 @media 规则

@media (max-width: 640px) {
  /*当视窗宽度小于或等于 640px 时，这里的样式将生效*/
}

样式断点

断点名称 断点描述
mobile 移动设备断点，视窗宽度 ≤ 768 px
tablet 平板电脑设备断点，视窗宽度 ≥ 769 px
desktop 桌面电脑断点，视窗宽度 ≥ 1024 px
widescreen 宽屏电脑断点，视窗宽度 ≥ 1216 px
fullhd 高清宽屏电脑断点，视窗宽度 ≥ 1408 px...