媒体查询（@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. Windows Sublime Text 配置Linux子系统(WSL)下的 gcc/g++ 编译环境

    0. 简介(若已了解背景可以跳过此部分) Windows 10 Build 14316以上版本中加入了"Windows系统的Linux子系统"(Windows Subsystem ...

  2. EntityFramework Core 2.0全局过滤（HasQueryFilter）

    前言 EntityFramework Core每一次版本的迭代和更新都会带给我们惊喜,每次都会尽量满足大部分使用者的需求.在EF Core 2.0版本中出现了全局过滤新特性即HasQueryFilte ...

  3. VNCServer，SSH Secure Shell Client,window远程控制linux

    1.VNC远程连接linux图形化桌面 2.SSH Secure Shell Client连接linux终端 3.设置FTP与linux传输文件 1.VNC远程连接linux图形化桌面 在centos ...

  4. 获取NVIDIA显卡的温度

    NVIDIA显卡在硬件上有温度传感器,可以感知显卡的运行环境.温度数据的获取,一般是通过调用NVIDIA的SDK的相关函数即可.SDK的下载的网址(https://developer.nvidia.c ...

  5. C# 枚举使用和对应说明获取实例

    1.定义枚举 /// <summary> /// 订单状态 /// </summary> public enum OrderState { 待支付 = 1, 待处理 = 2, ...

  6. hibernate学习（四）hibernate的一级缓存&快照

    缓存:提高效率 硬件的 CPU缓存   硬盘缓存   内存 软件的  io流缓存 hibernate  的一级缓存   也是为了操作数据库的效率. 证明一级缓存在  : Person p=sessio ...

  7. CentOS6.5 [ERROR] /usr/libexec/mysqld: Can't create/write to file '/var/lib/mysqld/mysqld.pid' (Errcode: 2)

    环境是CentOS6.5,先贴个错误代码: 这个问题解决了大半天,浪费了好多时间,不过也算是值了. 事故起因是因为突然断电,mysql server直接干掉了,也没有备用电源,重启了之后看日志tail ...

  8. CF368 D - Persistent Bookcase

    re了20多发 还是我在测试数据上操作最后了10多发才发现的 其实只需要多加一句就好了 真的愚蠢啊,要不都能进前100了 #include<bits/stdc++.h> using nam ...

  9. RSS简介

    1.RSS(Really Simple Syndication)简介 1.定义     对于网站:RSS 是一种使用 XML 向许多其他的网站分发自己网站上的网络内容的方法.     对于用户:RSS ...

  10. hihocoder #1456 : Rikka with Lattice(杜教筛)

    hihocoder #1456 : Rikka with Lattice(杜教筛) 题意 : 给你一个\(n*m\)方格图,统计上面有多少个格点三角形,除了三个顶点,不覆盖其他的格点(包括边和内部). ...