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-浏览器不支持).本文将详细介绍媒体查 ...
随机推荐
- cesium入门示例-3dTiles加载
数据转换工具采用cesiumlab1.5.17版本,转换后的3dTiles加载显示比较简单,通过Cesium.Cesium3DTileset接口指定url即可,3dTiles文件可与js前端代码放置一 ...
- 吴裕雄--天生自然KITTEN编程:飞船大战
- JXJJOI2018_T2_tank
题目描述 Lemon最近迷上了一款坦克对战游戏.在这款游戏中,Lemon需要驾驶一辆坦克与敌军对战. 坦克有很多不同的武器,每种武器有各自的特点,而Lemon所要做的就是合适地发射这些武器,对敌军造成 ...
- python——实现三级菜单选择的功能(原创)
#coding:utf-8 dict={'beijing':{'haidingqu':['qinghe','keji'],'chaoyangqu':['q','w']},'shandong':{'li ...
- django--ajax的使用,应用
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...
- Spring Boot 学习1-创建Spring Boot应用
如果使用Maven, 确保先安装好Maven再继续. 创建POM文件 在这里有两种方式: 继承Spring Boot parent的pom. 不继承. 继承Spring Boot pom 1 2 3 ...
- Picaso完美兼容OkHttp3.3,缓存优化两不误 - Tamic Developer"s Blog
为何在Fresco,Glide这么强大的背景下,我又想起了当初的Picasso,又为何写这篇文章?是因为最近项目采用了square公司的RxAndroid,Retrfit和OKhttp, 不得不联想到 ...
- 学习日记:Python爬虫-1
这几天在b站看小甲鱼的python3教程,照着写了个有道翻译的程序 代码中字典data中的内容,用浏览器审查元素,先随便输一个要翻译的,找到跳出来的post的那个网址,看formdata就行了 返回的 ...
- oa办公系统快速开发工具,助力企业优化升级
随着互联网的快速发展.信息化 IT 技术的不断进步.移动互联新技术的兴起,不管是大的集团企业还是中小型企业,纸质化的办公模式已不能满足现有需求,构建oa平台,为员工提供高效的办公环境尤其重要. 我们先 ...
- 面向web前端及node开发人员的vim配置
鉴于 window 下基本用不到 vim,所以下面内容不再提及 window,具体可以在相应 github 中查看手册操作基础:已装有上有 nodejs(npm).没装的可以移步官网:https:// ...