一. @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. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  2. 转: CSS3 @media 用法总结

    一.首先是<meta>标签 <meta name="viewport" content="width=device-width, initial-sca ...

  3. bootstrap基本用法

    进入中文官网:http://www.bootcss.com   开始第一个Demo   准备工作: (1)进入bootstrap中文官网,点击起步 (2)下载生产环境         下载好的文件是一 ...

  4. CSS中@support的用法 及其calc、media用法

    背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...

  5. 样式link属性media用法--媒体类型查询

    引用外部样式使用link 你可能想针对将要显示页面的设备类型(桌面PC.笔记本电脑.平板电脑.手机或者甚至页面的印刷版本)来调整页面的样式,可以利用一个media属性, 在<link>元素 ...

  6. @media用法。

    @media版本:CSS2  兼容性:IE5+   语法:    @media  sMedia { sRules }    说明:    sMedia :  指定设备名称.请参阅附录:设备类型  sR ...

  7. Bootstrap 基本用法(续)

    在bootstrap中有很多的组件,这些组件可以帮组我们更快的写出一些好看的样式,下面就是一些样式: 导航框: <ul class="nav nav-tabs"> &l ...

  8. Bootstrap 基本用法

    使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href=& ...

  9. 【Bootstrap简单用法】

    一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...

随机推荐

  1. [Luogu2170]选学霸

    这一道题,由于他说,"如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议."而要求"既不让同学们抗议,又与原来的M尽可能接近".因此,我们要对实力相 ...

  2. python socket基本连接功能实现

    socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中通信 在应用中,要写两个程序来通信,一个是服务器端程序,一个是客户端程序 ...

  3. Yii2.0基础框架

    前言:最近在用php写一个项目的接口,所以需要学习一下Yii的框架,也在这里记录一下. 整体结构 ssets文件夹:assets的作用是方便模块化,插件化的,一般来说出于安全原因不允许通过url访问p ...

  4. boost Filesystem

    The library Boost.Filesystem makes it easy to work with files and directories. Paths Paths can be bu ...

  5. Angular JS - 3 - Angular JS 双向数据绑定

    一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从 ...

  6. gitHub那些优秀的库和想要实现的效果

    1. 轮播库SDCycleScrollView 2. 自动布局库SDAutoLayout 3. 类似支付宝福卡滑动切换的效果 https://github.com/huangxuan518/HXCar ...

  7. 深入理解js——非构造函数的继承

    原文来自阮一峰日志(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.ht ...

  8. 【Flutter学习】基本组件之Webview组件

    1.添加依赖 dependencies: flutter_webview_plugin: ^+ 2.导入库 import 'import 'package:flutter_webview_plugin ...

  9. paper 164: Siamese网络--相似度量方法

    简介:    Siamese网络是一种相似性度量方法,当类别数多,但每个类别的样本数量少的情况下可用于类别的识别.分类等.传统的用于区分的分类方法是需要确切的知道每个样本属于哪个类,需要针对每个样本有 ...

  10. BZOJ 2806: [Ctsc2012]Cheat(单调队列优化dp+后缀自动机)

    传送门 解题思路 肯定先要建出来广义后缀自动机.刚开始以为是个二分+贪心,写了一下结果\(20\)分.说一下正解,首先显然\(L_0\)具有单调性,是可以二分的.考虑二分后怎样判合法,对于分割序列很容 ...