媒体查询（@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. Java8的一些新特性

    速度更快: 代码更少(增加了新的语法Lamdba表达式): Lamdba操作符"->" 语法格式: 左侧:参数列表 右侧:接口抽象方法的实现功能 Lamdba表达式 3.强大 ...

  2. xBIM WeXplorer 设置模型颜色

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  3. KV型内存数据库Redis

    Redis是开源的高性能内存Key-Value数据库, 可以提供事务和持久化支持, 并提供了TTL(time to life)服务. Redis采用单线程数据操作+非阻塞IO的模型,非阻塞IO提供了较 ...

  4. 【推荐】开源项目minapp－重新定义微信小程序的开发

    minapp 重新定义微信小程序的开发 官网:https://qiu8310.github.io/minapp/ 作者:Mora minapp 重新定义微信小程序的开发 使用 用 npm 安装命令行工 ...

  5. 最短路径问题（dijkstra-模板）

    #include<bits/stdc++.h> using namespace std; ][]; ]; ]; ][]; int n,x,y,s,m,e; int k; double mi ...

  6. 恢复Mysql丢失的root用户权限

      今天安装了某个程序时, 由于程序很傻X的 新建了一个 root@localhost 用户 并把 root权限全部改为了 no 这下 我也 傻X 了.服务器上所有程序都崩溃了. 此时即使用root用 ...

  7. 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画（可选）

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...

  8. Ubuntu 上查看硬件信息命令

    1.Mint 驱动程序管理器是由 Linux Mint 团队开发的一款系统工具软件,使得用户在Linux系统中可容易安装专有驱动,通过一个直观的界面.由于 Mint 驱动程序管理器具有独立性,它支持所 ...

  9. dm642的视频口输出

    void VP1_EDMA(int displayMode,unsigned int w,unsigned int h) {      unsigned int i=0,k=0;  EDMA_Hand ...

  10. PHPmysqli的 预处理执行查询语句

    header( 'Content-Type:text/html;charset=utf-8 '); require 'prepareSrarment.php'; $mysqli=new mysqli( ...