bootstrap的@media (min-width: 768px)

最新推荐文章于 2026-03-25 01:21:59 发布
原创 最新推荐文章于 2026-03-25 01:21:59 发布 · 1.1w 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了Bootstrap框架中响应式布局的实现原理，通过具体的代码示例解释了@media查询如何根据不同的屏幕尺寸应用特定的CSS样式。特别是针对导航栏组件在不同分辨率下表现的一致性和美观性的处理。

在bootstrap.css中，经常出现

@media (min-width: ...px)

样式名{

.....

}

这表示只有浏览器的屏幕宽度达到min-width时，下面的样式才会执行。

比如导航栏的navbar-left、navbar-right

@media (min-width: 768px)
.navbar-left {
  1. float: left !important;
  2. padding-left: 30px;
}
@media (min-width: 768px)
.navbar-right {
  1. float: right !important;
  2. margin-right: -15px;
  3. padding-right: 30px;
}


响应式分辨率几个划分方法
jugt的博客
09-08 774
@media screen 监听页面尺寸 示例： @media print @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){} @media(max-width:767px){} @media (min-width: 768px)表示最小是768也就是>=768，这里有等于， 我们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。 @med
打印样式的艺术：用CSS @media 规则优化页面输出
2401_85761003的博客
08-25 1379
随着Web技术的发展，CSS已经成为前端设计中不可或缺的一部分。在构建响应式网站时，除了考虑不同屏幕尺寸的显示效果，打印样式的优化同样重要。CSS的@media规则提供了一种灵活的方式来定义不同媒体类型下的样式，其中就包括打印媒体。本文将详细介绍如何使用@media规则来实现打印样式的优化，包括页面布局、字体大小、颜色和背景等的调整，并通过实际的代码示例，展示如何创建适合打印的Web页面。@media规则允许开发者根据不同的媒体类型应用不同的CSS样式。对于打印样式，我们主要关注print媒体类型。
Dify知识库想传大文件？修改.env这两个参数就够了（附自签SSL证书教程）
最新发布
weixin_30955617的博客
03-25 458
本文详细介绍了如何通过修改Dify知识库的.env文件参数来突破默认15MB的文件上传限制，并提供了自签SSL证书的完整教程，确保HTTPS安全部署。适用于企业用户处理大文件上传和加密需求，提升知识库系统的安全性和实用性。
css网页响应式布局
weixin_42291794的博客
07-29 416
1. 自适应布局 自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。 2. 响应式布局 响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容 3. 响应式布局方案 媒体查询 百分比 width、padding（上下左右）、margin（上下左右）：百分比相对于直接父元素的宽度 height：直接父元素的高度 border-radius、background-size、translate：
运用@media实现网页自适应中的几个关键分辨率
weixin_33843409的博客
01-31 528
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？ 先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是 768、992、1200。当然了过去也有 些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为...
媒体查询——>@media screen and (min-width: 768px)
qq_39579242的博客
08-28 1万+
响应式网页设计的时候，往往都需要运用到CSS3的媒体查询技术，实现在大PC端，普通PC端、平板端、移动端呈现不同的样式 参考数据标准： 当屏幕宽度&gt;1200px（超大PC显示器-lg）：    容器宽1170px 当屏幕宽度&gt;992px（普通PC显示器-md）:    容器宽970px 当屏幕宽度&gt;768px（平板显示器-sm）:        容器宽750px 当屏幕...
min-width是什么
weixin_30667649的博客
01-21 397
先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的，哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (m...
bootstrap中的@media媒体查询
yyjiuguilian的博客
11-05 1690
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> &l
Bootstrap 中CSS媒体查询分辨率 @media（min-width）
阿酷tony
10-26 1074
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap媒体查询
猫老爷
04-28 2944
开发工具与关键技术：VS Bootstrap 作者:听民谣的老猫 撰写时间：2019/4/27 11:07 最近在抠模板过程中开发的一个新知识领域Bootstrap 网格系统。 如果你想过同一个页面，手机有手机的样式布局，平板有平板的样式布局。不同设备样式布局也不同。那么你可以通过Bootstrap 网格系统来达到这一想法。 通过屏幕的大小来分辨你使用的设备 额外的小设备（手机，...
[转]css3 media媒体查询器用法总结
前端向朔
08-07 2376
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，可能有些人会觉得在国内IE6用户居高不下的情况下，这些新的技术还不会广泛的蔓延下去，那你就错了，如今淘宝，凡客，携程等等公司都已经在大胆的尝试了这项技术，并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。准备工作1：设置Meta标签首先我们在使用Media的时
@media实现网页自适应中的几个关键分辨率
weixin_30307267的博客
11-15 268
不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位。可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？首先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600、480的，那些小分辨率的我们都归类为小于767的。为什么是...
在html样式@media,移动端自适应样式之@media的使用方法
weixin_35079144的博客
06-21 2730
通用手机端样式：@media all and (orientation : portrait) {/*竖屏*/}@media all and (orientation : landscape) {/*横屏*/}指定手机端高度样式：@media screen and (max-width: 750px)@media screen and (min-width: 720px) and (max-wid...
利用@media与@media screen进行响应式布局
天空一角的梦
07-07 3229
了解Media QueriesMedia Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句...
CSS的@media语法实现页面端手机端的自适应
xdnloveme的博客
07-11 1万+
在CSS3版本内有这么一个语法： @media mediatype and|not|only (media feature) {     CSS-Code; }  最近初学css，需要用到设备和电脑端各种页面自适应的情况。当然自然而然就会想到这一个属性： @media，今天花了1小时左右做了一个自适应的小demo，如下图所示： 电脑端的显示图：
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例
weixin_33375038的博客
06-16 6666
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...
@media screen实现屏幕自适应内容详解
热门推荐
夜空下的凝视
05-16 2万+
优点： 无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需在CSS中添加@media screen属性，根据浏览器宽度判断并输出不同的长宽值。 准备工作1：设置Meta标签 首先，在使用Media时，需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-width, initial-scale=...
js的@media用法（根据不同页面适应）
weixin_43085797的博客
03-26 4895
响应式布局 responsive design @media 属性 bootstrap css 分析： @media (min-width:768px){ body{***} } use @media about the browser as a media [disabled] | :active | @media mediatype and|not|only (media...
CSS---媒体查询（@media 查询）
weixin_44691220的博客
10-09 1617
作为一名前端工程师，我们在工作中就是和不同的网页打交道，那么经常遇到的问题就是网页兼容性问题（自适应问题）。不仅是PC端和移动端之间的兼容问题，还有各自网页在不同分辨率下的自适应问题，造成了前端工作者非常大的苦恼。当然，有问题肯定就有解决方法，今天，我们主要分享其中一种便于入手的，即媒体查询。 媒体查询：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值