/* 大屏幕 */
@media (min-width: 1200px) { ... }

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }

/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

media查询(来源于bootstrap)的更多相关文章

  1. CSS3 @media 查询(制作响应式布局)

    这里简单说明一下@media 查询. 详细说明文档:http://www.runoob.com/cssref/css3-pr-mediaquery.html 使用 @media 查询,你可以针对不同的 ...

  2. CSS3 媒体查询@media 查询(响应式布局)

    例:如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background ...

  3. BootStrap的一个标准框架的内容解释——来源于bootstrap官网

    <!DOCTYPE html><!--HTML5的定义--><html lang="zh-cn"> <head> <meta ...

  4. CSS3 @media 查询

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 媒体查询包含了一个媒体类型和CSS3规范中描述的包含一个或多个表达式的媒体属性, ...

  5. CSS3 @media 查询,根据屏幕screen大小调节前端显示;媒体查询方法的使用

    ------------------- 1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) an ...

  6. 响应式布局及bootstrap(实例)

    说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...

  7. UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...

  8. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  9. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

随机推荐

  1. JSON.parse 测试

    第一种 报错 var t = JSON.parse(""); console.log(t); 第二种 正常 var t = JSON.parse('{"AA": ...

  2. (知识)width、naturalWidth、clientWidth、offsetWidth区别整理

    今天在做图片裁剪功能的时候,参考了下网友的资料,发现大家对图片宽度的获取方式不尽相同,于是详细整理下各个属性的区别(详细请参考MDN). 1,HTMLImageElement.width是一个unsi ...

  3. multiple users to one ec2 instance setup

    http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/managing-users.html usually when use pem file as ...

  4. Linux shell - 除法保留小数点

    我想实现 举例:1/3=0.33得到0.33, 尝试过bc 只能得到.33,没有0了, linux 下的shell脚本,1和3是变量$a和$b,并能指定小数点后的位数, 方法1: $> res= ...

  5. ACE官网

    ACE的官网是http://www.dre.vanderbilt.edu/~schmidt/ACE.html 文档的官网是https://htmlpreview.github.io/?https:// ...

  6. WINDOWS API 大全(一)

    1. API之网络函数 WNetAddConnection 创建同一个网络资源的永久性连接 WNetAddConnection2 创建同一个网络资源的连接 WNetAddConnection3 创建同 ...

  7. 十六、对RF中ROBOT_LIBRARY_SCOPE = 'GLOBAL'进行分析

    (1)ROBOT_LIBRARY_SCOPE属于ROBOT库范围,这个范围有三个等级,分别是TEST CASE.TEST SUITE.GLOBAL三个等级,默认是TEST CASE:GLOBAL这个等 ...

  8. MyEclipse中的查找快捷键

    MyEclipse中的查找快捷键 1.Ctrl+H:可以搜索文件,Java类名.方法名.包名等等. 例如:在MyEclipse中打开Search弹出框,或者在菜单中打开Search弹出框, 定位到 F ...

  9. hibernate 2 多对多映射

    一.实体类 1.Classes.java package cn.gs.wwg.entity; import java.util.Set; public class Classes { private ...

  10. jmeter线程组基本设置

    线程组基本设置 在线程组界面中可以设置以下数据,进行控制线程组: 1.取样器错误后要执行的动作: 继续:忽略错误,继续执行 Start Next Thread Loop: 忽略错误,线程当前循环终止, ...