媒体查询（@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. npm http-server Dockerfile alpine 微容器,袖珍体积,解决时区问题

    前端写得少,但是前端技术的思想也是非常有学习的价值,用VUE写了几个手机form页面,体验了一番spa,用docker部署也是非常简单 直接docker pull node  676M体积.不能忍. ...

  2. shell脚本基础1 概述及变量

    shell概述:在linux内核与用户之间的解释器程序通常指/bin/bash负责指向内核翻译及传达用户/程序指令相当于操作系统的"外壳" shell的使用方式:交互式--命令行: ...

  3. centos下利用qemu搭建arm模拟器

    有点繁琐,整理一下,系统环境centos6.6,虚拟机以及实际系统中测试通过. 一.交叉编译器的下载与安装1.下载地址:http://blog.csdn.net/dldw8816/article/de ...

  4. NLP︱高级词向量表达（一）——GloVe（理论、相关测评结果、R&python实现、相关应用）

    有很多改进版的word2vec,但是目前还是word2vec最流行,但是Glove也有很多在提及,笔者在自己实验的时候,发现Glove也还是有很多优点以及可以深入研究对比的地方的,所以对其进行了一定的 ...

  5. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  6. 【mongodb系统学习之一】mongodb的简单安装

    linux中mongodb的安装(最简单的): 1.下载mongodb安装包,这里用mongodb-linux-x86_64-2.6.9.gz 提供一个下载地址:http://pan.baidu.co ...

  7. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  8. 芝麻HTTP：TXT文本存储

    将数据保存到TXT文本的操作非常简单,而且TXT文本几乎兼容任何平台,但是这有个缺点,那就是不利于检索.所以如果对检索和数据结构要求不高,追求方便第一的话,可以采用TXT文本存储.本节中,我们就来看下 ...

  9. 远程块存储iSCSI

    /* Border styles */ #table-2 thead, #table-2 tr { border-top-width: 1px; border-top-style: solid; bo ...

  10. openfec的学习笔记

    openfec实现了多种纠删码的算法实现,就包括Reed-Solomon算法.其基本使用流程为:输入n个原始包的分组后,计算生成k个额外的冗余包,后续将这n+k包送到接收端,若发生原始包丢包,但只要总 ...