@media query 媒体查询

@media (min-width:768px)小屏 (>=)

@media (min-width:992px)中屏

@media (min-width:1200px)大屏

(默认超小屏 小于768px)

@media (max-width:1199px) 大屏(<=)

@media (max-width:991px)中屏

@media (max-width:767px)小屏

box-sizing:border-box 可以设置带边框的盒子模型,设置的div的高宽就是盒子的总高宽,box-sizing的属性会根据边框border、边距padding自动调整内容区的范围。

媒体查询@media query的更多相关文章

  1. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  2. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  3. 媒体查询media query

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  5. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  6. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  7. 媒体查询media参数以及其兼容性问题

    一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...

  8. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  9. 媒体查询Media Queries详解

    @media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...

随机推荐

  1. bzoj千题计划186:bzoj1048: [HAOI2007]分割矩阵

    http://www.lydsy.com/JudgeOnline/problem.php?id=1048 #include<cmath> #include<cstdio> #i ...

  2. 使用data:uri上传图片

    上传图片的方式有两种,一种是使用传统的html控件的方式,设置form属性为multipart/form-data.这种方式兼容ie6,ie7.另一种方式是使用data:uri,将base64编码从浏 ...

  3. 20155318 2016-2017-2 《Java程序设计》第五周学习总结

    20155318 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 try...catch 键盘输入利用java.util.Scanner,Scanner 名 ...

  4. 第11月第21天 php引用 codeigniter cakephp

    1. class CI_Controller { private static $instance; /** * Constructor */ public function __construct( ...

  5. 关于gb2312编码和utf8码的一个问题

    ANSI(注意拼写不是ASCII)并不是“一种”编码,而是“多种”编码的统称.在简体中文Windows上,ANSI指GBK编码:在繁体中文Windows上,ANSI指Big5编码:在英文Windows ...

  6. 01 workerman之GatewayWorker框架简单使用

    1.GatewayWorker框架是什么? GatewayWorker基于Workerman开发的一个项目框架,用于快速开发TCP长连接应用,例如app推送服务端.即时IM服务端.游戏服务端.物联网. ...

  7. 【Python】HackBack(获取暴力破解服务器密码的IP来源)

    1.前言 又在0x00sec上翻到好东东. https://0x00sec.org/t/python-hackback-updated/882 帖子里的脚本会得到那些暴力服务器密码失败的IP和用户名, ...

  8. Paint Fence

    There is a fence with n posts, each post can be painted with one of the k colors.You have to paint a ...

  9. vim助手

    移动光标 hjkl 2w 向前移动两个单词 3e 向前移动到第 3 个单词的末尾 0 移动到行首 $ 当前行的末尾 gg 文件第一行 G 文件最后一行 行号+G 指定行 <ctrl>+o ...

  10. Linux那些事儿之我是Hub(大结局)挂起自动化【转】

    转自:http://blog.csdn.net/fudan_abc/article/details/1805471 目睹了当今大学校园的素质流氓化,kiss公开化,消费白领化,上课梦游化,逃课普遍化, ...