记录媒体查询@media的用法

常见的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的设备*/
@media (min-width: 1024px){
body{font-size: 18px}
}/*>=1100的设备*/
@media (min-width: 1100px) {
body{font-size: 20px}
}/*>=1280的设备*/
@media (min-width: 1280px) {
body{font-size: 22px;}
}/*>=1366的设备*/
@media (min-width: 1366px) {
body{font-size: 24px;}
}  /*>=1440的设备*/
@media (min-width: 1440px) {
body{font-size: 25px !important;}
} /*>=1680的设备*/
@media (min-width: 1680px) {
body{font-size: 28px;}
}/*>=1920的设备*/
@media (min-width: 1920px) {
body{font-size: 33px;}
} 

注意:用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/65841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修复OpenHarmony系统相机应用横屏拍照按钮点不到的问题

适配OpenHarmony系统相机应用横屏UI, 相关pr: https://gitee.com/openharmony/applications_camera/pulls/233/files 适配效果 如何安装 编译好的hap提供在附件中 1.预置在源码,随固件安装 2.安装hap hdc shell "mount -o remount,rw /"…

debian系linux安装mysql

准备环境 (1) 先查询是否有安装mariadb,如果有,先执行以下命令卸载mariadb sudo apt-get remove --purge mariadb-server mariadb-client(2) 安装libncurses.so.5和libtinfo.so.5库文件 在数据库登录时会用到,执行以下命令查询 find / -type f -name …

10-Gin 文件上传 --[Gin 框架入门精讲与实战案例]

使用 Gin 框架处理文件上传是一个常见的任务,Gin 提供了简单而直观的方法来处理文件上传。下面将介绍如何用 Gin 实现文件上传功能。 1. 安装 Gin 如果你还没有安装 Gin,可以通过 Go 的包管理工具 go get 来安装: go get -u github.com/gi…

【react】常见的性能优化 1

目录 常见的 React 性能优化手段 1. 使用 useMemo 和 useCallback 缓存数据和函数 2. 使用 React.memo 缓存组件 3. 组件懒加载 4. 合理使用 key 5. 在组件销毁时清除定时器/事件 6. 使用 Suspense 和 Lazy 拆分组件 7. 使用 Fragment 避免额外标记 8. 避免使用内联函…

Promise实现原理解析,及实现方法。

Promise原理解析 Promise的介绍原理分析源码实现发布部分全部代码订阅部分基础代码简单发布订阅完整代码测试订阅能力链式调用的实现完整链式调用代码链式调用Promise完整功能代码 Promise的介绍 一,Promise的理解 在JavaScript中,Promise是一种用于处理…

http报头解析

http报文 http报文主要有两类是常见的,第一类是请求报文,第二类是响应报文,每个报头除了第一行,都是采用键值对进行传输数据,请求报文的第一行主要包括http方法(GET,PUT, POST&#…

【日常开发】Git Stash使用技巧

文章目录 引言一、git stash 基础命令(一)存储当前工作区的修改(二)查看存储列表 二、查看存储的内容(一)查看特定存储的详细内容(二)查看特定存储修改的文件列表 三、恢复存储的修改…

微服务保护-sentinel

为什么要有微服务保护? 微服务保护是为了避免微服务雪崩而出现的,每个微服务能处理的请求是有限的,如果一个微服务出现问题导致一个请求进入微服务的时间太久,就会导致大量去请求停滞在微服务内部,这样就会过分占用系统…

【Redis】Redis 典型应用 - 缓存 (cache)

目录 1. 什么是缓存 2. 使用 Redis 作为缓存 3. 缓存的更新策略 3.1 定期生成 3.2 实时生成 4. 缓存的淘汰策略 5. 缓存预热, 缓存穿透, 缓存雪崩 和 缓存击穿 关于缓存预热 (Cache preheating) 关于缓存穿透 (Cache penetration) 关于缓存雪崩 (Cache avalanche) 关…

关于easy-es对时间范围查询遇到的小bug

前言:在使用easy-es之前作为一个小白的我只有es原生查询的基础,在自己通过查看官方文档自学easy-es遇到了一个挫折,其他的还好语法和MybatisPlus差不多,正以为我觉得很快就能入手,在对时间范围的判断就给我当头一棒&am…

Python读取TIF文件

在Python中,逐帧读取TIFF文件(尤其是多页TIFF文件)可以使用tifffile库或Pillow库。以下是两种方法的示例: 方法 1:使用 tifffile 逐帧读取 tifffile 是一个专门用于处理TIFF文件的库,支持多页TIFF文件的逐…

只谈C++11新特性 - 显式转换函数

显式转换函数 背景与问题 在 C11 之前&#xff0c;explicit 关键字只能用于构造函数。其作用是阻止构造函数在需要隐式转换时被调用。例如&#xff1a; 示例问题&#xff08;C11 之前的 explicit 用法&#xff09; #include <iostream>class Example { public:explic…

从0到机器视觉工程师(一):机器视觉工业相机总结

目录 相机的作用 工业相机 工业相机的优点 工业相机的种类 工业相机知名品牌 光源与打光 打光方式 亮暗场照明 亮暗场照明的应用 亮暗场照明的区别 前向光漫射照明 背光照明 背光照明的原理 背光照明的应用 同轴光照明 同轴光照明的应用 总结 相机的作用 相机…

HTML——53. 创建表单

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>创建表单</title></head><body><!--form标签用于创建一个表单&#xff0c;会将里面的内容一起发送服务器&#xff0c;其结构类似于表格--><!--表…

逐行讲解大模型流式输出 streamer 源码

目录 简介TextStreamer 基础流式输出TextIterateStreamer 迭代器流式输出本地代码模型加载并前端展示streamlit 输出显示gradio 输出显示 vllm 部署模型并前端展示streamlit 输出显示gradio 输出显示 备注 简介 本文详细讲解了大模型流式输出的源码实现&#xff0c;包括TextSt…

java_使用阿里云oss服务存储图片

什么情况下可以使用阿里云oss服务存储图片&#xff1f; 对图片的访问速度有高要求时使用&#xff0c;方便用户快速的&#xff08;比如在网页页面中&#xff09;访问到图像 参考&#xff1a;41 尚上优选项目-平台管理端-商品信息管理模块-阿里云OSS介绍_哔哩哔哩_bilibili 1.…

第5章 共享内存范式:C语言层面

5.1OpenMP 5.1.1OpenMP的介绍 OpenMP三个原则 5.2OpenMP的使用 编译制导指令以#pragma omp 开始&#xff0c;后边跟具体的功能指令&#xff0c;格式如:#pragma omp 指令[子句[,子句].]。常用的功能指令如下: 5.2.1编译制导 5.2.2API和环境变量 具体案例-邻接矩阵 // 本代码…

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之循环结构(for循环语句)(七)

实战训练—鸡兔同笼 问题描述&#xff1a; 一个笼子里面关了鸡和兔子&#xff08;鸡有2只脚&#xff0c;兔子有4只脚&#xff0c;没有例外&#xff09;。已经知道了笼子里面脚的总数为a&#xff0c;问笼子里面至少有多少只动物&#xff0c;至多有多少只动物。 输入格式&…

web 开发全局覆盖文件上传身份验证漏洞利用

全局覆盖 首先认识全局变量和局部变量 再一个就是知道全局变量是全局使用的并且有个特点就是可以覆盖 这个就是全局变量我们输出一下发现 z居然等于函数内的计算值 把我们原来定义的全局变量 $z给覆盖了 看一下局部变量 这个时候 z就不会被覆盖 <?php $x1; $y2; …

No.2十六届蓝桥杯备战|练习题4道|数据类型|字符型|整型|浮点型|布尔型|signed|unsigned(C++)

B2002 Hello,World! - 洛谷 #include <iostream> using namespace std; int main() { cout << "Hello,World!" << endl; return 0; }打印飞机 #include <iostream> using namespace std;int main() {cout << " …