响应式开发学习笔记

前端学习笔记

响应式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...

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容