/* 大屏幕 */
@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. JPA学习(三、JPA_API)

    框架学习之JPA(三) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...

  2. BZOJ 4289: PA2012 Tax Dijkstra + 查分

    Description 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边 ...

  3. Spring Boot教程(二十二)使用Swagger2构建强大的RESTful API文档(1)

    由于Spring Boot能够快速开发.便捷部署等特性,相信有很大一部分Spring Boot的用户会用来构建RESTful API.而我们构建RESTful API的目的通常都是由于多终端的原因,这 ...

  4. Canvas 实现钟表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 第五周课程总结&试验报告 (三)

    课程总结 一,类的继承格式 1.在 Java 中通过 extends 关键字可以申明一个类是从另外一个类继承而来的,一般形式如下: class 父类 {} class 子类 extends 父类 {} ...

  6. 错误 NETSDK1007 找不到“E:\Project\MyProject\MyProject.Common\MyProject.Utility.csproj”的项目信息。这可以指示缺少一个项目引用。 MyProject.Data C:\Program Files\dotnet\sdk\2.2.107\Sdks\Microsoft.NET.Sdk\targets\Microsof

    因为对MyProject.Data引用的项目MyProject.Common进行了重命名为MyProject.Utility,导致这个错误 解决办法: 1.找到MyProject.Data中的E:\P ...

  7. nodejs 中 接受前端的数据请求的处理

    前台 ---->  后台 后台要接受 前台的数据,只能通过 http 但是 前台接受 后台的数据有  from   ajax    jsonp nodejs 给我们提供了模块 url 模块,可以 ...

  8. ftp4j揭示java.net.SocketException: Connection reset的解决

    ftp4j提示java.net.SocketException: Connection reset的解决系统的自动更新FTP服务器,其他计算机连接都没有问题,包括xp.server2008.win7. ...

  9. Linux_Grub2、系统启动流程_RHEL7

    目录 目录 前言 系统启动流程 控制RHEL7启动过程 编辑gurbcfg RHEL7启动级别 修改系统运行级别 RHEL7破密码步骤 grup2加密防止破密码 initramfs文件 前言 RHEL ...

  10. 终于, Delphi XE2 携带 GDI+ 库了

    终于, Delphi XE2 携带 GDI+ 库了 使用了较早的 http://www.progdigy.com uses Winapi.GDIPAPI, Winapi.GDIPOBJ{, Winap ...