pc 媒体查询
PC端
按屏幕宽度大小排序(主流的用橙色标明)
分辨率 比例 | 设备尺寸
1024*500 (8.9寸)
1024*768 (比例4:3 | 10.4寸、12.1寸、14.1寸、15寸; )
1280*800(16:10 |15.4寸)
1280*1024(比例:5:4 | 14.1寸、15.0寸)
1280*854(比例:15:10 | 15.2)
1366*768 (比例:16:9 | 不常见)
1440*900 (16:10 17寸 仅苹果用)
1440*1050(比例:5:4 | 14.1寸、15.0寸)
1600*1024(14:9 不常见)
1600*1200 (4:3 | 15、16.1)
1680*1050(16:10 | 15.4寸、20.0寸)
1920*1200 (23寸)
通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度
1024 1280 1366 1440 1680 1920
PC端响应式媒体断点
CSS代码
@media (min-width: 1024px){
body{font-size: 18px}
} /*>=1024的设备*/@media (min-width: 1100px) {
body{font-size: 20px}
} /*>=1100的设备*/
@media (min-width: 1280px) {
body{font-size: 22px;}
} /*>=1280的设备*/@media (min-width: 1366px) {
body{font-size: 24px;}
}@media (min-width: 1440px) {
body{font-size: 25px !important;}
}@media (min-width: 1680px) {
body{font-size: 28px;}
}
@media (min-width: 1920px) {
body{font-size: 33px;}
}
用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
另外在查资料时找到 谷歌浏览器插件 Window Resizer (火狐用户可以搜Firesizer)可以调用各种类型的分辨率尺寸查看效果
pc 媒体查询的更多相关文章
- (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全
(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40 阅读:3961 评论:0 收藏:0 [点我收藏+] 标签:styl ...
- pc端响应式-媒体查询
媒体查询(@media):能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果 列举常用的pc屏幕宽度: 1024 1280 1366 1440 1680 1920 ...
- css媒体查询移动优先和pc优先
移动优先,默认你是用手机浏览该网页的,当你用pc浏览时,就会以min-width进行递增式媒体查询 <!DOCTYPE html> <html lang="en" ...
- 媒体查询ipad,pc端
媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ ...
- background-size在PC端和移动端使用媒体查询的不同
1.PC端background-size:100%:是展现原图的大小. 2.使用媒体查询的移动端的background-size:100%:是根据内容的高度自动拉伸高度的.
- 媒体查询(pc端,移动端不同布局)
媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样 ...
- css3新特性@media(媒体查询)
现在web页面运行的设备的屏幕从pc端到pad,从pad到手机,各种各样,这样就用到了现在经常用到的响应式页面,为实现响应式页面开发,就用到一个非常有用的css3属性media(媒体查询). 介绍:媒 ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
随机推荐
- git使用的简要介绍
GIT """ 什么是git:版本控制器 - 控制的对象是开发的项目代码 代码开发时间轴:需求1 > 版本库1 > 需求2 > 版本库2 > 版本 ...
- Hibernate中的对象图关系转换:游离、持久、自由状态
- 吴裕雄--天生自然 人工智能机器学习实战代码:线性判断分析LINEARDISCRIMINANTANALYSIS
import numpy as np import matplotlib.pyplot as plt from matplotlib import cm from mpl_toolkits.mplot ...
- jQuery 源码学习 - 02 - jQuery.fn.extend 与 jQuery.extend
参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. extend 方法在 jQuery 中是一个很重要的方法.jQuery 内部用它来拓展静态方法或者 ...
- C++走向远洋——30(六周,项目一1.0)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:fenshu.cpp * 作者:常轩 * 微信公众号:World ...
- IP 多播
IP 多播 一.IP 多播的基本概念 1.1.简介 不使用多播时需要发送 90 次单播: 使用多播时只需要发送 1 次多播: 1.2.IP 多播的一些特点 多播使用组地址:D 类IP地址支持多播.多播 ...
- LeetCode---二叉树3-总结例题
二叉树-总结例题 1-从中序与后序遍历序列构造二叉树 给定二叉树的后序遍历和二叉树的中序遍历 想法: 先根据后序遍历的最后一个元素构造根节点 寻找根节点在中序遍历中的位置 递归构建根节点的左右子树 / ...
- Could not find a valid gem 'redis' (= 0)
Could not find a valid gem 'redis' (= 0) 报错详情如下: ERROR: Could not find a valid gem 'redis' (>= 0) ...
- 数据挖掘入门系列教程(二)之分类问题OneR算法
数据挖掘入门系列教程(二)之分类问题OneR算法 数据挖掘入门系列博客:https://www.cnblogs.com/xiaohuiduan/category/1661541.html 项目地址:G ...
- Linux系统简单文件操作命令
项目 内容 作业课程归属 班级课程链接 作业要求 作业要求链接 学号-姓名 17041419-刘金林 作业学习目标 1)学习Linux的基本操作命令:2)在终端上运用命令行去实现基本文件操作 1.查看 ...