前端学习笔记
响应式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...
网友评论