bootStrap @media 用法
一. @media 格式
@media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) and (max-width:xxx)) {
/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/
}
@media only screen and (min-width:xxx) and (max-width:xxx){
/*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/
}
@media only screen and (min-width:1024px) and (max-width:1292px){
body div{
font-size:30px;
color:red;
}
}
bootStrap @media 用法的更多相关文章
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- 转: CSS3 @media 用法总结
一.首先是<meta>标签 <meta name="viewport" content="width=device-width, initial-sca ...
- bootstrap基本用法
进入中文官网:http://www.bootcss.com 开始第一个Demo 准备工作: (1)进入bootstrap中文官网,点击起步 (2)下载生产环境 下载好的文件是一 ...
- CSS中@support的用法 及其calc、media用法
背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...
- 样式link属性media用法--媒体类型查询
引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...
- @media用法。
@media版本:CSS2 兼容性:IE5+ 语法: @media sMedia { sRules } 说明: sMedia : 指定设备名称.请参阅附录:设备类型 sR ...
- Bootstrap 基本用法(续)
在bootstrap中有很多的组件,这些组件可以帮组我们更快的写出一些好看的样式,下面就是一些样式: 导航框: <ul class="nav nav-tabs"> &l ...
- Bootstrap 基本用法
使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href=& ...
- 【Bootstrap简单用法】
一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...
随机推荐
- 在vscode中快速生成vue模板
点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...
- SpringIntegration---Redis
1.依赖 <dependency> <groupId>org.springframework.integration</groupId> <artifactI ...
- 使用Navicat for Oracle新建表空间、用户及权限赋予
Navicat for Oracle是有关Oracle数据库的客户端工具.通过这个客户端,我们可以图形方式对Oracle数据库进行操作. 说 明我们此次试验的Oracle数据库版本是Oracle ...
- 【leetcode】891. Sum of Subsequence Widths
题目如下: 解题思路:题目定义的子序列宽度是最大值和最小值的差,因此可以忽略中间值.首先对数组排序,对于数组中任意一个元素,都可以成为子序列中的最大值和最小值而存在.例如数组[1,2,3,4,5,6] ...
- git 切换分支开发并合并提交到远程仓库
- 线程join方法 小demo
1.第一个示例: package cn.threaddemo; public class T implements Runnable { public static int a = 0; @Overr ...
- ES6中模块加载出现的问题
1.如何在浏览器中import模块 在使用模块加载时不同浏览器有不同的行为 使用 import 加载模块时,需要把script标签的type属性改为module.此时Firefox浏览器支持impor ...
- [CSP-S模拟测试]:biology(DP)
题目传送门(内部题23) 输入格式 第一行有$2$个整数$n,m$.接下来有$n$行,每行$m$个整数,表示$a$数组.接下来有$n$行,每行$m$个整数,表示$b$数组. 输出格式 一行一个整数表示 ...
- [CSP-S模拟测试]:math(裴蜀定理)
题目传送门(内部题22) 输入格式 第一行有$2$个整数$n,k$.第二行有$n$个正整数$a_i$. 输出格式 第一行有一个整数$s$,表示可以生成的非负整数的个数.第二行有$s$个可以生成的非负整 ...
- LCA 总结
代码: //RMQ求LCA struct node { int v, w; }; class LCA { private: vector<int>dep, pos, olx, dis; v ...