媒体查询（@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. 解决maven项目Cannot change version of project facet Dynamic web module to 3.0

    问题描述         用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servl ...

  2. haproxy配置文件详解和ACL功能

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  3. CodeForces-748D 贪心

    这题的思维难度不是很大,属于编程实现细节处理较多的题. 暂且把每个字符串的"beauty"称为魅力值,用一个优先队列数组将同一个字符串的所有魅力值保存,通过map将不同字符串编号, ...

  4. CEPH RGW集群和bucket的zone group 不一致导致的404异常解决 及 使用radosgw-admin metadata 命令设置bucket metadata 的方法

      问题现象: 最近在研究zonegroup的配置操作,发现在配置zonegroup后修改了default zone,导致访问对象报404错误. 问题原因: rgw 日志 报异常'request fo ...

  5. 网络基础tcp/ip协议四

    网络层的功能: 定义了基于ip协议的逻辑地址. 链接不同的媒介类型. 选择数据通过网络的最佳路劲. 数据包格式: 优先级与服务类型(8)位:优先级与服务类型 标识符,标志,段偏移量:这几个字用来对数据 ...

  6. 判断ios或者android

    <script type="text/javascript"> $(function () { // android和iso下载链接 var u = navigator ...

  7. 兼容ie7以上的 placeholder属性

    最近项目踩过的坑,不考虑ie的可以拐弯绕路走了. css3的新属性 占位符 placeholder用着多舒服 . 偏偏万恶的ie不支持,网上有几种方法是用焦点事件代替的,不过会失去原有的特性.一旦获取 ...

  8. dojo中的xhrPost请求（JSON）

    dojo中的xhrPost请求 dojo.xhrPost({ url:"../area.action", content:{ areaCode:areaCode }, handle ...

  9. JXL组件生成报表报错（一）

    JXL组件生成报表 1.具体报错如下 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonami ...

  10. Error:dijit.tree.TreeStoreModel:root query returned 0 items

    1.错误描述 error loading root:                                            Tree.js(第341行) Error:dijit.tre ...