美文网首页
如何禁止响应式布局

如何禁止响应式布局

作者: houxnan | 来源:发表于2019-11-08 08:34 被阅读0次

禁止响应式布局,主要有以下几个步骤:

第一步:在响应式布局中,在html的head部分,会有这样一行代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

若要禁止响应式布局,则要将这行代码去掉。

第二步:通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置,例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意,如果你把它放到媒体查询中,也可以略去 !important 。

即在css文件中设置下面这样:

第三步:如果使用了导航条,需要移除所有导航条的折叠和展开行为。

第四步:于栅格布局,额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心,针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

即将html文件中所有的<div class="col-sm-4 col-md-3 col-lg-2">全部都换成<div class="col-sm-4">这样固定的即可。

相关文章

  • 如何禁止响应式布局

    禁止响应式布局,主要有以下几个步骤: 第一步:在响应式布局中,在html的head部分,会有这样一行代码: 若要禁...

  • 响应式布局

    一、响应式网页 二、如何测试响应式网页 三、响应式布局必须要清楚的两个概念 四、如何编写响应式网页 五、 Boot...

  • 响应式布局目录

    └─Web响应式布局├─1 响应式布局介绍├─2 响应式布局实例(Media Queries模块) 上├─3 响应...

  • 九、HTML5响应式布局

    @(HTML5)[相应式布局] [TOC] 九、HTML5响应式布局 什么是响应式网页设计(布局) 响应式网页设计...

  • grid实现响应式布局

    一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局 在这篇文章中,我将教你如何使用 CSS G...

  • 响应式网页开发

    响应式布局 什么是响应式布局?可以让一个网站兼容不同分辨率设备的布局 为什么要使用响应式布局?给用户更好的视觉使用...

  • 响应式开发

    响应式布局 什么是响应式布局?可以让一个网站兼容不同分辨率设备的布局 为什么要使用响应式布局?给用户更好的视觉使用...

  • js基础(6)

    27、移动端响应式布局开发 响应式布局开发 1、什么是响应式布局开发?把我们开发完成的产品,能够让其适配不同的设备...

  • Bootstrap 响应式设计

    简介 本教程讲解如何在网页布局中应用响应式设计。在课程中,您将学到响应式 Web 设计。随着移动设备的普及,如何让...

  • flex布局及常用属性

    flex 布局 demo 圣杯响应式布局

网友评论

      本文标题:如何禁止响应式布局

      本文链接:https://www.haomeiwen.com/subject/dnxibctx.html