(min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {/* Styles */} /* iPads (portrait...) ----------- */ @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation...如果你希望网页在iphone4上得到最佳效果，你可以这样设置： 但是这样有悖于响应式布局的原则，当你将网页放在其他设备上显示时...你的网页只能看到320像素宽的内容，最好的解决办法是使用设备的宽度 Viewport 的比例 移动设备上，...但是如果你将视窗的宽度与设备相匹配，你将不需要再缩小图像以保证其能全部显示，这里用到了 initial-scale 属性 如果你想禁用放大功能
min-width: 1200px) { ... } /*默认*/ @media (min-width: 980px){...} /* 平板电脑和小屏电脑之间的分辨率 */ @media (min-width: 768px...) and (max-width: 979px) { ... } /* 横向放置的手机和竖向放置的平板之间的分辨率 */ @media (max-width: 767px) { ... } /*...class 设备 .visible-xs 额外的小设备（小于 768px）可见 .visible-sm 小型设备（768 px 起）可见 .visible-md 中型设备（768 px 到 991 px...）可见 .visible-lg 大型设备（992 px 及以上）可见 .hidden-xs 额外的小设备（小于 768px）隐藏 .hidden-sm 小型设备（768 px 起）隐藏 .hidden-md...响应式实用工具 <script src="/scripts/<em>jquery</em>.min.js
在屏幕下，宽度在 768~991 之间，执行操作 @media screen and (min-width:768px) and (max-width:991px){} C....内层 或 class="dropdown-menu" ①. li.divider : 分割线效果 ②. li.disabled : 禁用菜单项 ③. li.dropdown-header...JS 插件.Bootstrap 基于 jQuery ，在 jQuery 基础上提供了十几个插件函数，每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js，每个插件函数都有两种调用方式...静态样式语言：CSS 可以被浏览器直接解析处理，但 CSS 并不是合格的语言，缺少了基本编程的要素，如：变量，运算符，函数...... 由于不是动态的，所以导致了 CSS 的可维护性差 (2)....Less 语言 Less 是一本 CSS 预处理语言，它扩充了 CSS，在纯静态的 CSS 基础上增加了一部内容 如：变量，混合(Mixin) ...
布局中必须row包含col，不能单独col bootstrap网格系统 col- 针对所有设备 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px...class="col-sm-9 col-md-6"> test 布局 bootstrap再html的display css属性上封装了三种布局方式...，使用控件嵌套方式布局，设置宽度最大值和最小值 .container, which sets a max-width at each responsive breakpoint .container-fluid...(node导入jquery） import from ‘jquery’ window. = window.jQuery = //jquery设置window变量，window变量可以delete...多媒体 @media=“mediatype and|not|only (expressions)” orientation : landscape| portrait 横屏、竖屏 min-width、max-width
通过使用响应式布局，可以使网页在不同的设备上保持良好的显示效果，无论是在桌面电脑、平板电脑还是手机上。...媒体查询 使用 CSS 的媒体查询可以根据设备的特征（如屏幕宽度、高度、设备类型等）应用不同的样式。这使得你可以为不同的屏幕尺寸定义不同的布局。...media (min-width: 992px) { * { background: yellow } } /* 平板电脑 */ @media (min-width: 768px...) and (max-width: 768px) { * { background: green } } /* 小屏设备 */ @media (max-width: 576px...) { * { background: blue } } 效果： 响应式图片 使用 max-width: 100%; 来确保图像和媒体元素在小屏幕上不会超出其容器。
166 由于其结构层次清晰，在不同的应用场景下，我们可以很方便地修改其样式（长、宽、字体、字号、颜色、显示如否等...---- 还有一点比较重要的html设置，需要告知浏览器将页面宽度设置为设备宽度，并禁用缩放行为。...居中对其等，使用它可以简便、完整、响应式地实现各种页面布局（如需进一步了解，推荐看阮一峰写的Flex 布局教程：语法篇） ---- 另外推荐结合SASS或LESS等编译器，可以使用诸如变量定义、minin或函数...、语法潜逃、工具函数等功能，提高代码重用度和可维护性。...(平板竖屏、手机) @media screen and (max-width: 768px){ .body{ padding-left:0; padding-right
166 由于其结构层次清晰，在不同的应用场景下，我们可以很方便地修改其样式（长、宽、字体、字号、颜色、显示如否等...还有一点比较重要的html设置，需要告知浏览器将页面宽度设置为设备宽度，并禁用缩放行为。...例如可以方便地实现流式布局、居中对其等，使用它可以简便、完整、响应式地实现各种页面布局（如需进一步了解，推荐看阮一峰写的Flex 布局教程：语法篇） 另外推荐结合SASS或LESS等编译器，可以使用诸如变量定义、mixin或函数...、语法嵌套、工具函数等功能，提高代码重用度和可维护性。...(平板竖屏、手机) @media screen and (max-width: 768px){ .body{ padding-left:0; padding-right
166 由于其结构层次清晰，在不同的应用场景下，我们可以很方便地修改其样式（长、宽、字体、字号、颜色、显示如否等...---- 还有一点比较重要的html设置，需要告知浏览器将页面宽度设置为设备宽度，并禁用缩放行为。...居中对其等，使用它可以简便、完整、响应式地实现各种页面布局（如需进一步了解，推荐看阮一峰写的Flex 布局教程：语法篇） ---- 另外推荐结合SASS或LESS等编译器，可以使用诸如变量定义、mixin或函数...、语法嵌套、工具函数等功能，提高代码重用度和可维护性。...(平板竖屏、手机) @media screen and (max-width: 768px){ .body{ padding-left:0; padding-right
/jquery/1.12.4/jquery.min.js"> <!...属性为 user-scalable=no 可以禁用其缩放（zooming）功能。...这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！...因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。...@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max
因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。...因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。...*/ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */...) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max...class="col-md-9 c1 col-xs-9"> 栅格参数 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的
响应式断点设置demo 从以上得出一般要考虑的几个关键断点分别为：手机横屏，平板竖屏，pc窄屏，pc宽屏，pc超大屏（比较适合购物商城，视频类站点），再加上默认的手机样式就构成了全方位海陆空覆盖，正好对应上我们设置断点的第一条规则...这里先说min-width和max-width的区别：min-width表示屏幕最小宽度为多少，也即等于或大于该值，如min-width:768px则表示屏幕要等于或大于768px才会应用该样式，同理max-width...反过来如果你的业务是pc优先，那默认是pc的样式，兼容到移动的时候就是由大到小，所以采用max-width（这种方式后面的移动端需要重置覆盖默认pc上的很多样式，比较浪费） 为什么是这些数字？...这里的数字大概有三种，一种是范围的代表如544px，一种是分辨率的代表如768px，一种就是我们布局主体内容的实际宽度如992px和1200px。为什么是这三种数字其实跟内容在各个平台的表现有关。...，如携程。
还有一些其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。...这两种浏览器以及很多其他浏览器如chrome、opera，都支持用viewport meta元素覆盖默认的画布缩放设置，只需要在html的标签中插入一个标签。标签中可以设置具体的宽度或者缩放比例。...缩放是一个重要的辅助功能，所以实践中很少禁用。...这表示浏览器将按照其视口的实际大小来渲染页面 针对不同视口宽度修正设计 设置viewport meta 标签后，现在我们针对不同视口修正设计效果，创建CSS样式表，并在页面中调用： 常见媒体查询 /* 平板电脑布局: 481px 至 768px...弹性图片 我们需要为图片设置max-width:100%和height:auto，来实现其弹性化。
cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"> @media (min-width: 768px...background-color: #f5f5f5; } .form-signin { width: 100%; max-width...rules: { server: [ { required: true, message: 'IMAP服务器如"
实例 如果浏览器窗口的宽度为 768px 或更小时，把 元素的背景颜色更改为“浅蓝色”： @media only screen and (max-width: 768px) { body...{ background-color: lightblue; } } 宽度大于768px 背景色为绿色 宽度大于768px 背景色为蓝色 定义和用法 @media 规则在媒体查询中用于为不同的媒体类型...device-height 输出设备渲染表面（如屏幕）的高度。已在 Media Queries Level 4 中被弃用。 device-width 输出设备渲染表面（如屏幕）的宽度。...display-mode 应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定在 Web App Manifest spec 被定义。...max-width 显示区域的最大宽度，例如浏览器窗口。 min-aspect-ratio 显示区域的宽度和高度之间的最小比例。 min-color 输出设备每个颜色分量的最小位数。
.col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显示器 (...） */ /* Bootstrap 中默认情况下没有媒体查询,但是可以自己添加 */ @media (max-width: @screen-xs-max) { ... } /* 小型设备（平板电脑，768px...-- 响应式表格,当在大于 768px 宽的大型设备上查看时您将看不到任何的差别。--> <!....img-responsive #图片响应式 (将很好地扩展到父元素)， max-width: 100%; 和 height: auto; 样式应用在图片上 .caption #div标签 .thumbnail...max-width: 100%; #让图像按比例缩放，不超过其父元素的尺寸。
立即调用的函数表达式：在JS中，function定义后通过加小括号，完成立即调动。...=function(e){} jQuery事件绑定：jQuery使用on和off来绑定和禁用时间，但bootstrap中稍有变化 $('td').on('click', function(event)...常用js插件 在之前CSS的基础上，BootStrap自带12种jQuery插件，其利用bootstrap数据API，大部分插件可以在不编写任何代码的情况下触发。... BootStrap中的js都遵循同样的步骤来实现js插件，如下所示 声明立即调用函数，如+function($){"use strict";}(jQuery); 定义插件类及相关原型方法...，如Alert.prototype.close 在jQuery上定义插件并重设插件构造函数，如$.fn.alert.Constructor=Alert 防冲突处理，如$.fn.alert.noConflict
实例如果浏览器窗口的宽度为 768px 或更小时，把 元素的背景颜色更改为“浅蓝色”：@media only screen and (max-width: 768px) { body {...background-color: lightblue; }}宽度大于768px 背景色为绿色宽度大于768px 背景色为蓝色定义和用法@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式...device-height输出设备渲染表面（如屏幕）的高度。已在 Media Queries Level 4 中被弃用。device-width输出设备渲染表面（如屏幕）的宽度。...display-mode应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定在 Web App Manifest spec 被定义。...max-monochrome单色（灰度）设备上每种“颜色”的最大位数。max-resolution设备的最大分辨率，使用 dpi 或 dpcm。max-width显示区域的最大宽度，例如浏览器窗口。
2、尺寸尽量使用相对尺寸 1、文字尺寸 ：em ，rem 2、容器尺寸 ：%,auto 3、图片尺寸 ：%,auto (max-width...@media MEDIA-TYPE and (MEDIA-FEATURE) w <= 767px : PHONE 768px...文件 作用：让 老版本的IE(IE8及以下) 支持 H5的新标记以及 C3 媒体查询技术 1、html5shiv.min.js 第三方JS，自调函数... 2、respond.min.js 第三方JS，自调函数...w <= 767px 各种PHONE屏幕 2、Bootstrap提供的两个容器class 1、定宽容器 在不同宽度大小的设备上均提供了固定的宽度值
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
