首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想显示切换条在屏幕尺寸为992-1200像素(大屏幕)使用bootstrap.Its只出现在屏幕尺寸低于992px

在屏幕尺寸为992-1200像素(大屏幕)时,您可以使用Bootstrap来显示切换条。Bootstrap是一个流行的前端开发框架,提供了许多用于构建响应式网页的组件和工具。

要在屏幕尺寸低于992px时显示切换条,您可以使用Bootstrap的导航组件。导航组件包括导航栏(Navbar)和导航链接(Nav Link),可以帮助您创建具有响应式布局的导航菜单。

以下是一种实现方式:

  1. 首先,确保您已经引入了Bootstrap的CSS和JavaScript文件。您可以从Bootstrap官方网站(https://getbootstrap.com)下载这些文件,或者使用CDN链接。
  2. 在HTML文件中,创建一个导航栏容器,并添加所需的导航链接。例如:
代码语言:txt
复制
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在上面的代码中,我们创建了一个导航栏容器(<nav>),并添加了一个品牌标志(<a class="navbar-brand">)和一个切换按钮(<button class="navbar-toggler">)。导航链接被包含在一个导航栏折叠容器(<div class="collapse navbar-collapse">)中。

  1. 最后,您可以使用CSS媒体查询来控制在不同屏幕尺寸下的显示效果。例如,您可以在屏幕尺寸低于992px时隐藏导航链接,只显示切换按钮。在屏幕尺寸大于等于992px时,显示导航链接。以下是一个示例CSS代码:
代码语言:txt
复制
@media (max-width: 991px) {
  .navbar-nav {
    display: none;
  }
}

在上面的代码中,我们使用了@media规则和max-width属性来指定屏幕尺寸的范围。在屏幕尺寸低于992px时,我们将导航链接的显示设置为none,从而隐藏它们。

这样,当屏幕尺寸为992-1200像素时,导航链接将显示为切换按钮,点击切换按钮将展开导航链接。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云视频处理(VOD):https://cloud.tencent.com/product/vod
  • 腾讯云音视频通信(TRTC):https://cloud.tencent.com/product/trtc
  • 腾讯云云原生应用引擎(TKE):https://cloud.tencent.com/product/tke

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

常用的CSS样式

自己平时整理的一些常用的 CSS 样式 设置透明度 IE6中使用 filter: alpha(opacity = 40); 在其他浏览器中使用 opacity: 0.4; 设置行高 /*\9表示兼容所有的...: 1px solid #ccc; display: block; position: absolute; left: 0; bottom: 0; } /* 如果网页最小屏幕像素比为...1px::after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } /* 如果网页最小屏幕像素比为...important; } 响应式布局中屏幕尺寸的表示 这里是以 iView 框架为例,不同框架的尺寸值可能不一样 xs 超小屏幕 手机 (<576px) sm 小屏幕 平板 (≥576px...) md 中等屏幕 桌面显示器 (≥768px) lg 大屏幕 大桌面显示器 (≥992px) xl 超大屏幕 (≥1200px) xxl 超级大屏幕 (≥1600px) 设置标签的高度浏览器窗口的高度

66530

移动开发之响应布局

设备划分 尺寸区间 超小屏幕(手机) <768px 小屏设备(平板) >=768px ~ <992px 中等屏幕(桌面显示器) >=992x ~ <1200px 宽屏设备(大桌面显示器) >=1200px...,看到不同的页面布局和样式变化 平时我们的响应式尺寸划分 超小屏幕(手机,小于768px):设置宽度100% 小屏幕(平板,大于等于768px):设置宽度750px 中等屏幕(桌面显示器...,大于等于992px):设置宽度970px 大屏幕(大桌面显示器,大于等于1200px):宽度设置1170px 但是我们也可以根据实际情况自己定义划分 2.Bootstrap前端开发框架...JS相关课程,所以我们考虑使用它的样式库 控制权框架本身,使用者要按照框架所规定的某种规范进行开发。...超小屏幕(手机)=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container最大宽度 自动(100%) 750px

2.2K20
  • Bootstrap响应式工具

    md(中等屏幕):适用于小型笔记本电脑和平板设备,屏幕宽度大于等于768px。lg(大屏幕):适用于大型笔记本电脑和台式机,屏幕宽度大于等于992px。...xl(超大屏幕):适用于大型台式机和显示器,屏幕宽度大于等于1200px。通过类名中使用这些断点,开发者可以根据不同屏幕尺寸应用特定的样式或布局。...d-{breakpoint}-inline-block:指定断点上以内联块元素显示元素。通过使用这些显示/隐藏类,可以根据不同屏幕尺寸来控制元素的可见性,从而实现更好的响应式布局。...例如,.w-md-50将在中等屏幕及以上的屏幕尺寸上将元素的宽度设置50%。.mw-{breakpoint}-{width}:指定断点上将元素的最大宽度设置指定的宽度。...例如,.mw-lg-75将在大屏幕及以上的屏幕尺寸上将元素的最大宽度设置75%。通过使用这些宽度调整类,可以根据不同屏幕尺寸来调整元素的宽度,以实现更好的布局控制和适应性。

    2.3K40

    Android 与 Chrome OS 中针对大屏幕设备的更新

    这是因为所有应用无论是否声明尺寸切换,都可以分屏模式或者单独窗口下运行,所以有必要更新您的应用以适配尺寸变化,同时避免应用重启或者进入兼容模式。...WindowMetrics △ 任意屏幕尺寸构建 Android 界面 首先介绍 WindowMetrics。...大屏幕设备上,由于用户对于分屏和其他多窗口形式的使用频率越来越高,您的应用很可能不会占据整个屏幕。...例如,您可以通过独立的 Activity 显示这些列表和详细信息,不过您可能希望大屏幕显示这些内容。虽然建议您以单一 Activity 的方式重构应用,不过能理解,这么做的成本非常高。...接下来我们聊聊 Chrome 操作系统以及 Android 平板电脑和可折叠设备中避免应用出现在兼容模式中所需要做到的重要的几件事: △ 运行在开放形式模式充分利用屏幕空间 不同的设备类型提供合适的大屏幕布局

    2.4K40

    详细的聊一聊如何使用响应式图片,提升网页加载速度

    结果是,大多数开发者只会为所有屏幕尺寸使用同一张图片,并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法,因为浏览器仍会下载完整尺寸的图片(通常非常大),即使它以其一部分尺寸显示。...一旦浏览器的宽度大于400像素,浏览器将切换使用tree-800.jpg图像。这是因为400像素的图像现在比当前屏幕尺寸小,如果使用它会被拉伸/模糊。...屏幕上,的博客内容(包括图像)占据了整个屏幕的宽度,但在较大屏幕上,将内容居中显示,并设置了一个有限的最大宽度。...这是这个博客添加响应式图像的代码方式,因为的博客较大的屏幕尺寸上受到最大宽度的限制。让我们看一个实际的示例。...这意味着,如果您通过缩放或调整窗口大小来更改屏幕尺寸,它将切换到正确的图像。 sizes属性的工作方式类似,但适用于增大屏幕尺寸的情况。

    52330

    android系统如何自适应屏幕大小

    3.2是否支持大屏幕 android:largeScreens=["true" | "false"] 如果在声明不支持的大屏幕,而这个屏幕尺寸是larger的话,系统使用尺寸("normal"...2)如果没法找到相应的尺寸,而找到密度,则认为该图片尺寸 "medium",利用缩放显示这个图片。 3)如果都无法匹配,则使用默认图片进行缩放显示。...的话,系统使用尺寸    ("normal")和密度("medium)显示。...2.)对于你声明不支持的大屏幕,而这个屏幕尺寸是larger的话,系统同样使用尺寸("normal")和密度("medium)显示, 不过会出现一层黑色的背景。...3)不要使用AbsoluteLayout 4)像素单位都使用DIP,文本单位使用SP 6、代码中获取屏幕像素屏幕密度 DisplayMetrics metric = new DisplayMetrics

    5.2K10

    移动端WEB开发之响应式布局

    设备的划分情况: 小于768的超小屏幕(手机) 768~992之间的小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...bootstrap里面父容器版心的尺寸划分 超小屏幕(手机,小于 768px):设置宽度 100% 小屏幕(平板,大于等于 768px):设置宽度 750px 中等屏幕(桌面显示器,大于等于...992px):宽度设置 970px 大屏幕(大桌面显示器,大于等于 1200px):宽度设置 1170px 但是我们也可以根据实际情况自己定义划分 2 、bootstrap(前端开发框架...4.x.x:最新版,目前还不是很流行 2.4bootstrap基本使用 现阶段我们还没有接触JS相关课程,所以我们考虑使用它的样式库。...超小屏幕(手机)=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container 最大宽度 自动(100%) 750px

    4K20

    【Android 应用开发】Android屏幕适配解析 - 详解像素,设备独立像素,归一化密度,精确密度及各种资源对应的尺寸密度分辨率适配问题

    (px)与设备独立像素(dip)比较: dip越大, 屏幕尺寸越大, 分辨率越高, 越清晰, 屏幕大分辨率不一定大, 如电脑; (2) Android设备相关名词 密度(density) : 物理宽高范围内显示像素数量..., 同样屏幕大小的手机, 低密度显示像素点少, 高密度显示像素点多; -- 资源分类 :固定像素宽高的UI资源(图片资源的宽高是按照像素确定的), 低密度显得很大, 高密度显示的很小, 因此为了使...: 每英寸含有的像素点数, 拿使用的三星GT-N8000例, 水平方向上的真实密度 每英寸149.82像素, 垂直方向上的真实密度 每英寸150.51像素; -- 运算不按照该方式 : 按照该密度计算...目录中的图片资源; -- xlarge超大屏幕 : 使用drawable-xlarge目录中的图片资源;  同时根据屏幕尺寸和密度适配 : 如适配大屏幕的中等密度 使用 drawable-large-mdpi...目录下的布局文件; -- 横屏布局 : 横屏的情况下会自动加载 res/layout-land 目录下的布局文件; 如果设置一个布局 : 禁用自动切换, 只是用横屏 或者 只是用竖屏 进行布局; -

    63620

    网页布局的几种方式有哪些_做网页建议用哪种布局

    这种布局具有很强的稳定性与可控性,也没有兼容性问题,但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动,如果大于这个宽度则会留下空白。...缺点:因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以大屏幕显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样,显示非常不协调 栅格化布局   将网页宽度人为的划分成均等的长度...在这种布局方式下,当视口大小低于设置的最小视口时,界面会出现显示不全,溢出,并出现滚动。而且当需求改变时,可能会改动多套代码。   ...=1, user-scalable=no" /> 然后使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。...弹性布局(rem/em布局)   弹性布局跟流布局很像,网页宽度不固定,使用 em 或 rem 单位进行相对布局,避免了使用像素 px 布局高分辨率下几乎无法辨识的缺点,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示

    3K20

    提示大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台

    大屏幕游戏的常见问题 作为游戏开发者,您当然想要在每台设备上都提供最佳的游戏体验——无论用户是使用竖屏模式,还是使用键鼠,甚至可折叠设备 (拥有更多可切换的分辨率和宽高比配置) 上进行游戏。...另外,许多新设备也支持使用时动态切换配置,例如从折叠模式转换到平板电脑模式。想要支持这些场景,最佳的方法是检测设备上可用的硬件,以便玩家提供最佳体验。...最后一步是在所有大屏幕设备上测试。添加涵盖不同设备的、更多样游玩流程的测试用例,例如最小化最大化、屏幕大屏幕之间切换、变更输入设备和调整窗口大小。...了解 configChanges developer.android.google.cn/guide/topic… 让游戏画面尺寸实现自适应,以不同显示模式之间灵活切换,从而让用户折叠和展开屏幕时都能体验到无缝的切换过程...通过遵循 Android 最佳实践并额外投入一些时间思考您的游戏大屏幕上体验的可能性,您可以将您的游戏带到更大的舞台上,真正做到每个玩家提供最佳的游戏体验。 您的游戏有适配更多的屏幕尺寸吗?

    1.5K30

    将 UWP 的有效像素(Effective Pixels)引入 WPF

    本文中,对于尺寸,我们说三个概念: 物理尺寸(单位:厘米) 显示像素个数(单位:个) 有效像素(即 WPF 中最常用的那个单位;本文结束之前,这应该是一个未定义的概念) 如果我们说 A 按钮比...非 PC 设备(手机、平板电脑、大屏幕电视)上,如果依然保持物理尺寸相同,那么 PC 上显示合适的 3cm 的按钮在手机上将占据大半个屏幕电视上将小得几乎看不见。...认识到一个优秀的屏幕显示单位并不是按物理尺寸定义,而是根据不同的使用场景有所不同。第 1 点也部分得到了缓解——接受 DPI 缩放的特性,放弃承认物理尺寸相同的设定。...谈显示像素个数: 用户使用了最佳分辨率 DPI 值 96 时,显示完按钮宽度所用的屏幕像素个数 96 DPI 值设置 192 时,则显示完按钮宽度所用的屏幕像素个数是 192 以上情况下...,如果用户降低了分辨率 居中点对点显示显示完按钮宽度所用的屏幕像素个数 96 拉伸显示显示完按钮宽度所用的屏幕像素个数大于 96,虚拟的系统像素个数依然等于 96 接受现实 看看按钮实际的大小

    1.5K21

    bootstrap快速入门笔记(二)-栅格系统,响应式类

    */ /* 小屏幕(平板,大于等于 768px) */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */...@media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: @screen-lg-min...超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列...四,响应式工具类 通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。...超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-

    1.1K30

    大屏幕和折叠屏: 让您的 Android 游戏登上更大的舞台

    大屏幕游戏的常见问题 作为游戏开发者,您当然想要在每台设备上都提供最佳的游戏体验——无论用户是使用竖屏模式,还是使用键鼠,甚至可折叠设备 (拥有更多可切换的分辨率和宽高比配置) 上进行游戏。...这将为用户节省宝贵的下载空间,同时也免去了不同像素密度的屏幕维护多个 APK 的麻烦。...最后一步是在所有大屏幕设备上测试。添加涵盖不同设备的、更多样游玩流程的测试用例,例如最小化最大化、屏幕大屏幕之间切换、变更输入设备和调整窗口大小。...hl=zh-CN#config 让游戏画面尺寸实现自适应,以不同显示模式之间灵活切换,从而让用户折叠和展开屏幕时都能体验到无缝的切换过程。...通过遵循 Android 最佳实践并额外投入一些时间思考您的游戏大屏幕上体验的可能性,您可以将您的游戏带到更大的舞台上,真正做到每个玩家提供最佳的游戏体验。 您的游戏有适配更多的屏幕尺寸吗?

    1.3K20

    移动端WEB开发之响应式布局

    设备的划分情况: 小于768的超小屏幕(手机) 768~992之间的小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2...原理就是不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。...父容器版心的尺寸划分 超小屏幕(手机,小于 768px):设置宽度 100% 小屏幕(平板,大于等于 768px):设置宽度 750px 中等屏幕(桌面显示器,大于等于 992px):...宽度设置 970px 大屏幕(大桌面显示器,大于等于 1200px):宽度设置 1170px 但是我们也可以根据实际情况自己定义划分 2.0 bootstrap的介绍 2.1Bootstrap...4.x.x:最新版,目前还不是很流行 2.4bootstrap基本使用 现阶段我们还没有接触JS相关课程,所以我们考虑使用它的样式库。

    3.4K31

    创建支持多种屏幕尺寸的Android应用

    分辨率 :屏幕上物理像素的总数。支持多屏时,应用程序不直接与分辨率有关,应用程序应该关心屏幕尺寸和密度,用指定的广义的尺寸和密度组。...例如,大屏幕上,可能会调整某些元素的位置和尺寸去充分利用额外的屏幕空间,或者一个较小屏幕上,会调整尺寸使得一切都可以屏幕显示。 可以提供指定大小资源的配置限定符,有小、标准、大、超大。...使用表2中的这些尺寸限定符,应用程序可以使用任何想要的宽度或高度的平板和手机的不同布局资源间切换。...下面是关于如何确保你的应用程序能够恰当地显示不同屏幕上的快速检查清单: 1.当在XML布局文件中指定尺寸时,使用wrap_content, fill_parent, 或者dp单位 2.应用程序代码中不要使用硬编码的像素值...在这种情况下,系统绘图时会自动调整绝对像素的坐标值和像素尺寸。这样做的目的是,为了确保已定义像素屏幕元素仍然能以接近他们基线屏幕密度(hdpi)上的物理尺寸显示出来。

    2.6K60

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    2、设计方法:   PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,屏幕宽高有调整时,使用横向和竖向的滚动来查阅被遮掩部分;   移动设备:另外建立移动网站,单独设计一个布局...缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。 当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。...因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调...1、布局特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。 2、设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。...响应式和弹性布局之间的对比: 响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏大屏幕下是横排,屏幕下是竖排,超小屏幕下隐藏菜单,也就是说如果有足够的耐心,每一种屏幕下都应该有合理的布局

    10.7K33

    Android 应用打造精良的 Chrome OS 使用体验

    随着人们越来越多地大屏幕设备或者多型态设备上使用应用,开发者们的作品也得以吸引大量全新的用户。 Android 支持各种各样的大屏幕设备,包括平板电脑、可折叠设备、Chrome OS 笔记本等等。...△ Asphalt 8: Airborne △ Concepts 今年的 I/O 开发者大会上我们有一场专门的演讲,大家介绍如何让应用在各种外形和尺寸的设备上都能拥有良好的视觉和性能表现。...△ 同一个界面针对不同屏幕的布局文件 导航模式 同时,您的应用在不同的屏幕尺寸上都应该易于使用。提供纵向、横向等布局,使得应用可以根据可用的屏幕宽度,底部导航、侧边导航和侧边扩展导航模式之间切换。...Reply 适配多屏幕尺寸: material.io/design/mate… △ Reply 屏幕尺寸不同时会采用不同的导航模式 多屏幕 当用户使用多个显示器时,两个屏幕之间通常会存在像素密度差异。...您的 Android 应用有没有支持更大、更多样的屏幕尺寸、更多种类的设备?有没有为它们提供高完成度的使用体验?如果您在界面和交互适配上有任何疑问或者想法,欢迎评论区和我们分享。

    33710

    FAQ | 大屏幕设备构建应用的常见问题解答

    例如 LumaFusion 这款产品,进入教育市场时,Chromebook 起到了至关重要的作用。因为用户在编辑视频时需要在屏幕上进行大量的操作,更大尺寸屏幕用户带来了更多的屏幕使用空间。...简而言之,大屏幕使用该产品是最理想的使用场景。...答: 首先是思维的转变,过去直板手机开发应用,如今要切换形状各异且尺寸不一的设备开发应用,开发者需要转变思维来考虑界面如何在各种尺寸的设备上运行,因为大屏设备的市场重要性已经毋庸置疑了。...数据显示,因为更大的屏幕空间,可折叠设备的多任务处理量增加了 7 倍,开发者有必要平衡布局的简单性与灵活性以优化应用,例如开发者使用新的窗口尺寸类别和视口断点时,如果要优化断点的布局,可以将其视为 3...多任务处理方面,大屏幕提供给用户更多空间进行多项操作,如果用户折叠设备上使用应用,开发者要考虑优化的是当用户展开设备时确保应用有良好的连续性、良好的界面显示效果和外观。

    3.5K10

    【Android 屏幕适配】屏幕适配基础概念 ④ ( 屏幕适配限定符 | 手机平板电脑设备屏幕适配 )

    一、屏幕适配限定符 ---- Android 系统加载应用资源时 , 会根据当前运行应用的设备的相关属性 , 如 : 屏幕尺寸 / 屏幕像素密度 / 宽高比 / 屏幕方向 等属性 , 加载不同的屏幕适配限定符目录下的资源...; 如 : 横竖屏切换时 , res/layout-land 目录中 , 存放的是横屏布局 , res/layout-port 目录中 , 存放的是竖屏布局 ; 屏幕尺寸限定符 : small : 小屏幕...; normal : 标准屏幕 ; large : 大屏幕 ; xlarge : 超大屏幕 ; 屏幕密度限定符 : ldpi : 低屏幕像素密度 , \rm 0 < dpi \leq 120 ;...( DIP , Desity Independent Pixels ) 值 345.6 ; 手机设备限定符 布局 或 图片 目录名称中 , 加上 sw360dp 限定符 , 几乎兼容所有的手机设备...; 当前市面上的手机 , 屏幕宽度 很少有超过 360 dp 的 ; 只要横向 密度无关像素 \rm \leq 360 dp , 就可以使用 sw360dp 限定符下的资源 , 如 res/layout-sw360dp

    7.1K20

    JS:用rem来做响应式开发

    电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证不同手机上都能正常显示给用户,之前做这类网站都是无脑引进bootstrap的。...但前一个项目做完之后发现bootstrap虽好,但里面的各种样式利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次自己用原生写,响应式开发...2.媒体查询: 这个是css3中给出的,我们要解决的问题是适应手机屏幕,这个媒体查询正是解决这个问题而生,媒体查询的功能就是不同的媒体设置不同的css样 式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等...(你还可以设置更多节点) 用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围; 3.还有就是css3的单位rem: rem就是将根节点html的font-size的值作为整个页面的基准尺寸...那就要用到js页面加载时获取window的宽度(浏览器窗口的宽度)$(window).width();开发手机页面的时候,一般我们设置最大宽度640px,因为640px可以保证至今最宽的手机上显示时网页两端刚好贴合屏幕

    6.1K10
    领券