bootstrap的视口检测和媒体查询
2020-08-02 17:46
911 查看
1.视口检测
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.媒体查询写法
(1).在style标记中写@media代码
@media screen and (max-width: 屏宽 ) {css代码…… } @media screen and (min-width: 屏宽 ) {css代码…… } 或者 @media (max-width:屏宽 ) {css代码…… } @media (min-width:屏宽 ) {css代码…… }
(2).在单独的css文件里写@media代码,再通过link调用css文件
<link media="screen and (max-width: 屏宽)" href="css文件" rel="stylesheet"> <link media="screen and (min-width: 屏宽)" href="css文件" rel="stylesheet"> 或者 <link media="(max-width: 屏宽)" href="css文件" rel="stylesheet"> <link media="(min-width: 屏宽)" href="css文件" rel="stylesheet">
(3).在max-width或者min-width之间添加device
@media screen and (max-device-width: 屏宽) {css代码…… } @media screen and (min-device-width: 屏宽) {css代码…… } 或者 @media (max-device-width: 屏宽) {css代码…… } @media (min-device-width: 屏宽) {css代码…… }
(4).判断显示屏幕宽度还可以表示一个区间
@media (min-width: 屏宽1) and (max-width: 屏宽2) {css代码…… } 或者 @media screen and (min-width: 屏宽1) and (max-width: 屏宽2) {css代码…… } 或者 <link media=" (min-width: 屏宽1) and (max-width: 屏宽2) " href="css文件" rel="stylesheet"> 或者 <link media=" screen and (min-width: 屏宽1) and (max-width: 屏宽2) " href="css文件" rel="stylesheet">
相关文章推荐
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
- Bootstrap CSS3媒体查询断点
- 当遇到不能用框架做响应式布局怎么办,,响应式布局的动态检测,js判断,媒体查询与 min-width,max-width的 结合使用,大杂烩。。。
- Bootstrap笔记2—禁止响应、清除浮动、图片响应式、媒体查询
- 媒体查询:支持不同的视口
- 前端开发响应式设计之媒体查询(bootstrap)
- 响应式手机网站——视口约束&媒体查询
- 初次接触媒体查询---bootstrap 栅格 (待补充)
- bootstrap 媒体查询
- Bootstrap 3 媒体查询
- CSS3-多列-视口-媒体查询-弹性盒/弹性布局-Node介绍
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第2章 媒体查询:支持不同的视口
- bootstrap解决低于IE9版本html5及媒体查询不支持的问题
- bootstrap~~媒体查询兼容IE
- Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询
- Bootstrap基础必读(三) HTML中屏幕尺寸标准 媒体查询
- Bootstrap之底层媒体查询
- Bootstrap3 栅格系统-媒体查询
- 第二章 媒体查询 支持不同的视口
- Bootstrap3 栅格系统-媒体查询