CSS媒体查询--电脑尺寸大全
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} }
@media (min-width: 1100px) {body{font-size: 20px}} @media (min-width: 1280px) { body{font-size: 22px;} }
@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那么就是大的在上面,小的在下面
CSS媒体查询--电脑尺寸大全相关推荐
- 计算机常用屏幕分辨率,pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率 比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
- css 媒体查询 移动端,媒体查询(pc端,移动端不同布局)
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- CSS媒体查询:最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
最新文章
- 【问题解决】ESP32 Brownout detector was triggered,log报错Brownout解决方法
- 自己实现strstr函数与strchr函数
- Spring面试之不同版本AOP执行顺序详解
- consul java 注册中心_Spring Cloud微服务架构实战之Consul注册中心02:consul入门案例...
- 蝙蝠未能连接到服务器是什么原因,打开蝙蝠侠提示网络异常或者连接不上
- Python说文解字_半成品再加工
- Kafka的消息可靠性(防止消息丢失)
- 职高计算机应用基础教学目标,职高计算机应用基础教法初探.doc
- boost::stacktrace::detail相关的测试程序
- 教你怎样用Python画了一棵圣诞树,快来学习
- C#合并两个(多个)集合
- 《佛密诸事》第七章:释逸牟尼四十九禅修录(节录十日)
- 计科专业新生须知:什么才是编程?助你进阶大牛的必经之路
- span标签鼠标悬浮出现手图标
- iOS程序字体与ps设计字体换算
- BeanUtils复制粘贴内容
- 深入理解Linux内核之内核线程(上)
- UE4 虚幻引擎,怎么导出模型,FBX
- 移动APP数据分析能做什么 1
- 不仅仅是建模 6个步骤解析沙盒游戏场景设计
热门文章
- 完全图、连通图、非连通图、连通分量、强连通图、生成树的概念
- JSplumb 中文教程(前端自定义组件,流程图,拓扑图)
- 从键盘输入两个数求他们的最大公约数
- [项目管理-5]:软硬件项目管理 - 项目人力资源管理 (人)
- Mybatis resultMap discriminator(鉴定器) 实操
- 计算几何(三)三角形面积
- Treap(平衡树)入门
- 中秋节+国庆节,抓住Niushop“中国节”钜惠活动,错过就没有啦!
- 使用Awescnb构建酷炫的博客园皮肤
- 【十六】 H.266/VVC | VVC中帧间预测技术详细总结 | 所有帧间预测技术代码汇总