早上好，仙女刘，首先恭喜你在2019.06.13号也就是昨天生日快乐！希望你在今后的每一天都是开开心心的，爱你哟，早上起床后的在激动心情下的美美哒

好了，现在进入正题：

在做响应式页面的时候，我经常用到媒体查询。写代码的时候，一个页面我基本一个css就搞定了。但是页面最后的最后，我真心的为我的css代码感到悲伤。太难找我的样式了对于不同的屏幕大小。尽管我的样式写了，但是我的代码是真心的丑陋。所以今天就针对媒体查询这块，我研究了研究怎样才能在后期快速修改查找要调整的部分。

我找到的方法就是：针对不同的屏幕我独立写一个css样式。----非常好

举例html：

<div id="div"></div>

接着写css1.针对屏幕最大为750px的设备写的样式：mediaMaxwidth750.css

#div{

   width:300px;

   height:300px;

   background:#ff0000;

}

　　

接着写css2.针对屏幕最小为751的设备写的样式：mediaMinwidth751.css

#div{

   width:100%;

   height:100vh;

   background:#000000;

}

　　

OK现在完成了；组合起来就是

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" media="screen and (max-width:750px)" href="css/mediaMaxwidth750.css"/>

		<link rel="stylesheet" media="screen and (min-width:751px)" href="css/mediaMinwidth751.css"/>

	</head>
        <style>
                *{margin:0;padding:0}
        </style>

	<body>

		<div id="div"></div>

	</body>

</html>

效果如图：

　

CSS-@media媒体查询(输出设备中的页面可见区域宽度)的更多相关文章

  1. CSS Media媒体查询使用大全，完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  2. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  3. css3 media媒体查询器用法总结（附js兼容方法）

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  4. 控制页面打印的2种方法（css3的media媒体查询和window.print()）

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  5. CSS3 media媒体查询器的使用方法

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...

  6. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  7. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  8. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  9. 语义化标签和media媒体查询可以放心使用

    现在的高级浏览器都支持html5,只有IE6-IE8不支持.(下面说的IE均值IE6-IE8) 有两个特性在IE是可以使用的: 1.语义化标签: header(头部) section(区块) foot ...

随机推荐

  1. charles 模拟手机弱网、修改请求参数、修改返回值

    1.charles模拟弱网(断网) 2.charles修改请求参数 (1)先访问一次需要改的请求,在charles上找到相应的请求地址 (2)然后在需要打断点的请求上右键,勾选[Breakpoints ...

  2. H5 JS判断客户端是否是iOS或者Android手机移动端

    <script type="text/javascript"> var u = navigator.userAgent; || u.indexOf(; //androi ...

  3. virtualbox安装win7系统报错（“FATAL：No bootable medium found!”）

    virtualbox属于傻瓜式安装虚拟系统,但博主安装win7系统时,无论怎么调试都还是出现截图所述样式,网上教程很多,但是都不行,其实只有一个根本原因安装的iso镜像不是原生镜像,下载的镜像已经是被 ...

  4. Survey lists 10 most innovative cities

    From China Daily Beijing and Shanghai are among the 10 most innovative cities in the world, based on ...

  5. ACM Changchun 2015 L . House Building

    Have you ever played the video game Minecraft? This game has been one of the world's most popular ga ...

  6. Linux学习-以最新核心版本编译 CentOS 7.x 的核心

    为了某些缘故需要最新的 4.x.y 的核心版本来实作某些特定的功能时,那该 如何是好?没办法,只好使用最新的核心版本来编译你可以依照上面的程序来一个一个处理, 没有问题~不过,你也可以根据 ELRep ...

  7. socket中send和recv函数

    Socket一次Recv接受的字节有限制么? 从套接字接收数据. 返回值是表示接收数据的字符串. 一次接收的最大数据量由bufsize指定.它默认为零. 注意为了最好地匹配硬件和网络现实,bufsiz ...

  8. python小数据池，代码块深入剖析

    小数据池 目的:缓存我们字符串,整数,布尔值.在使用的时候不需要创建更多的对象 缓存:int,str,bool int:缓存范围-5~256 str:    1.长度小于等于1,直接缓存 2.长度大于 ...

  9. MMM的一周计划 准备公告

    (19.6.17——19.6.22) 目前本周还没有过去所以还会更新 第0周 目前博客更新暂定于 [题目难度颜色见洛谷] 1.绿题以上绝对更新 2.黄题可能更新 3.其他估计不会有更新 准备工作 1. ...

  10. java append方法

    JAVA 中 Stringbuffer 有append()方法  Stringbuffer其实是动态字符串数组  append()是往动态字符串数组添加,跟“xxxx”+“yyyy”相当那个‘+’号  ...