早上好，仙女刘，首先恭喜你在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. PHP使用FTP上传文件到服务器(实战篇)

    我们在做开发的过程中,上传文件肯定是避免不了的,平常我们的程序和上传的文件都在一个服务器上,我们也可以使用第三方sdk上传文件,但是文件在第三方服务器上.现在我们使用PHP的ftp功能把文件上传到我们 ...

  2. k8s搭建WebUI--Dashborad管理界面

    k8s的webUI管理界面可以更好更直观更便捷的让我们去管理我们的k8s集群. 我们知道,由于某些原因我们无法直接拉取dashboard的镜像,但是国内有些人已经将镜像下载到dockerhub中可以给 ...

  3. php 计算当天凌晨时间戳 以及获取其他常用时间戳

    php 计算当日凌晨时间戳 以及获取其他常用时间戳(持续补充中...) 获取当天凌晨时间戳: echo strtotime(date('Y-m-d')); 以下再列举一些获取其他常用时间戳的方法 获取 ...

  4. 15.Yii2.0框架where单表查询

    目录 新建控制器 HomeController.php 新建model article.php 新建控制器 HomeController.php D:\xampp\htdocs\yii\control ...

  5. thinkphp5开发restful-api接口学习 教程视频 接口文档

    目录 1. 获取验证码 2. 用户注册 3. 用户登录 4. 用户上传头像 5. 用户修改密码 6. 用户找回密码 7. 用户绑定手机号 8. 用户绑定邮箱 9. 用户绑定用户名(手机/邮箱) 10. ...

  6. 七周成为数据分析师06_MySQL

    关于 MySQL 的知识,主要也是一些实操和练习. 因为个人之前已经专门练习过 MySQL 操作,这里就不做笔记,之后另写一篇博文记录 MySQL 知识. 同时附上本课程对应的文字教程: 如何七周成为 ...

  7. Python9-hashilib模块-day28（大年初三）

    __getitem__\__setitem__\__delitem__ class Foo: def __init__(self,name,age,sex): self.name = name sel ...

  8. LeetCode（228） Summary Ranges

    题目 Given a sorted integer array without duplicates, return the summary of its ranges. For example, g ...

  9. SPOJ 1825 Free tour II 树分治

    题意: 给出一颗边带权的数,树上的点有黑色和白色.求一条长度最大且黑色节点不超过k个的最长路径,输出最长的长度. 分析: 说一下题目的坑点: 定义递归函数的前面要加inline,否则会RE.不知道这是 ...

  10. JAVA 基础--开发环境IDEA 搭建

    1.下载IDEA  (500M+) 2.激活. 在网站http://idea.lanyus.com/中获取注册码,填入Activation code中: 然后点击Activate即可. 3.创建工程前 ...