媒体查询（@media）：能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

列举常用的pc屏幕宽度：

1024  1280  1366  1440  1680  1920 

我们可在css样式中来写，也在不同屏幕下引入相应的样式。

1、css样式

假设我们在不同屏幕下要写基础字体的变化；

@media screen and(min-width: 1024px){

body{font-size: 12px}

} /*>=1024的设备屏幕*/

@media screen and(min-width: 1100px) {

body{font-size: 14px}

} /*>=1100的设备屏幕*/

@media (min-width: 1280px) {

body{font-size: 18px;}

} /*>=1280的设备屏幕*/

@media screen and(min-width: 1366px) {

body{font-size: 20px;}

} /*>=1366的设备屏幕*/ 

@media screen and(min-width: 1440px) {

body{font-size: 24px !important;}

} /*>=1440的设备屏幕*/ 

@media screen and(min-width: 1680px) {

body{font-size: 26px;}

}  /*>=1680的设备屏幕*/

@media screen and(min-width: 1920px) {

body{font-size: 30px;}

}  /*>=1920的设备屏幕*/

*获许有人要问 screen  这个起什么作用？

他用于电脑屏幕，平板电脑，智能手机等。还有别的属性值，我就不多说。看菜鸟教程：http://www.runoob.com/cssref/css3-pr-mediaquery.html

2、样式引入

<link rel="stylesheet" media="(min-width:1024px) and (max-width:1366px)" href="mediaStyle.css" />

3、ie8兼容

对 ie低版本情况下不支持css3，这就是让前端头疼的事，但是不用急，有办法；

在页面<head></head>之间写下面这段代码

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

html5.min.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。

respond.min.js：让IE6-IE8等其他浏览器支持媒体查询

上面的俩js我直接引的bootstrap  的cdn脚本，你们也可以下载拷贝。

最后为了减少ie低版本的出现，加上一句 <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />我感觉会更好

　　

pc端响应式-媒体查询的更多相关文章

  1. 探讨兼容IE低版本的PC端响应式布局

    http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...

  2. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

  3. Bootstrap的介绍和响应式媒体查询

    Bootstrap的介绍 凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴.哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法 ...

  4. PC 端响应式布局

    前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...

  5. (原)css 响应式媒体查询 模板

    @media only screen and (max-width:340px) { html,input{ font-size:80%; } } @media only screen and (ma ...

  6. 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

  7. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  8. 【CSS-移动端响应式布局详解】

    背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...

  9. 移动端使用rem同时适应安卓ios手机原理解析，移动端响应式开发

    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...

随机推荐

  1. 遇见JMS[1] —— activeMQ的简单使用

    1.JMS Java Message Service,提供API,供两个应用程序或者分布式应用之间异步通信,以传送消息. 2.相关概念 提供者:实现JMS规范的消息中间件服务器客户端:发送或接收消息的 ...

  2. 《Android进阶之光》--Android新特性

    Android 5.0新特性 1)全新的Material Design设计风格 2)支持多种设备 3)全新的通知中心设计--按照优先级显示 4)支持64位ART虚拟机 5)多任务视窗Overview ...

  3. UVA - 1371 Period 二分+dp

    思路:设字符串x的长度为n,y的长度为m,那么答案一定在[0, m]之间,那么可以二分求答案. d(i, j)表示第一个串前i个字符至少需要经过多少次才能的到第二个串的前j个字符,转移方程d(i, j ...

  4. lua 操作数据库

    操作mysql主要用到了lua-resty-mysql库,代码可以在github上找得到 而且上面也有实例代码 由于官网给出的例子比较基本,代码也比较多,所以我这里主要介绍一些怎么封装一下,简化我们调 ...

  5. 如何高效的编写Verilog HDL——进阶版

    博主之前写过一篇文章来谈论如何高效的编写Verlog HDL——菜鸟版,在其中主要强调了使用Notepad++来编写Verilog HDL语言的便捷性,为什么说是菜鸟版呢,因为对于新手来说,在还没有熟 ...

  6. 如何进行系统配置 ——了解DOS下的内存

    DOS操作系统最早设计时,PC机的硬件系统只支持1M字节的寻址空间,所以DOS只能管理最多1M字节的连续内存空间.在这1M内存中,又只有640K被留给应用程序使用,它们被称为常规内存或基本内存,其它3 ...

  7. 项目总结1——excel导出相关问题

    1.excel导出文件时,文件名中中文部分空白不显示的问题,原本写法是: String fileName = "物联网PBOSS主机巡检日报-" + inspectTime + & ...

  8. mysql常用基础操作语法（六）--对数据排序和限制结果数量的条件查询【命令行模式】

    1.使用order by对查询的结果进行排序,asc升序,desc降序: 也可以在order by后指定多个字段名和排序方式进行多级排序: 2.使用limit限制查询结果的数量: 上图中的0,代表查询 ...

  9. Flex中的FusionCharts 3D饼图

    1.3D饼图设计源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns: ...

  10. linux下mount/unmount命令

    格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有:-a 安装在/etc/fstab文件中类出的所有文件系统.-f 伪装mount,作出检查设备和目录的样子,但并不真正挂载文件系 ...