该媒体查询适配规则是以UI设计图750p宽度为版本的，比如PS量的是450px，在书写时写 (450rem/2/15).

@media (min-width:240px) and (max-width:320px){html{font-size:12.8px!important}}

@media (min-width:321px) and (max-width:360px){html{font-size:14.4px!important}}

@media (min-width:361px) and (max-width:375px){html{font-size:15px!important}}

@media (min-width:376px) and (max-width:384px){html{font-size:15.36px!important}}

@media (min-width:385px) and (max-width:414px){html{font-size:16.56px!important}}

@media (min-width:415px) and (max-width:450px){html{font-size:18px!important}}

@media (min-width:451px) and (max-width:500px){html{font-size:20px!important}}

@media (min-width:501px) and (max-width:550px){html{font-size:22px!important}}

@media (min-width:551px) and (max-width:569px){html{font-size:22.72px!important}}

@media (min-width:569px) and (max-width:640px){html{font-size:25.6px!important}}

@media (min-width:641px) and (max-width:667px){html{font-size:26.68px!important}}

@media (min-width:668px) and (max-width:736px){html{font-size:29.44px!important}}

@media (min-width:738px) and (max-width:768px){html{font-size:30.72px!important}}

@media (min-width:769px) and (max-width:900px){html{font-size:36px!important}}

@media (min-width:901px) and (max-width:1080px){html{font-size:43.24px!important}}

　　

移动端媒体查询CSS3适配规则的更多相关文章

  1. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  2. (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

    (响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:styl ...

  3. css3 媒体查询常用适配

    @media (max-width:1300px) {} @media (max-width:1080px) {} @media (max-width:799px) {} @media (max-wi ...

  4. pc端常用电脑屏幕 （(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  5. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  6. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  7. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  8. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  9. 移动端响应式布局--你不知道的CSS3.0媒体查询，解决rem部分情况下无法适配的场景

    媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...

随机推荐

  1. eclipse Maven Dependencies pom

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  2. phpspreadsheet 中文文档（七）技巧和诀窍

    2019年10月11日14:08:35 以下页面为您提供了一些使用广泛的PhpSpreadsheet食谱.请注意,这些文件没有提供有关特定PhpSpreadsheet API函数的完整文档,而只是一个 ...

  3. spring boot使用WebClient调用其他系统提供的HTTP服务

    WebClient的请求模式属于异步非阻塞,能够以少量固定的线程处理高并发的HTTP请求 WebClient是Spring WebFlux模块提供的一个非阻塞的基于响应式编程的进行Http请求的客户端 ...

  4. PAT 1093

    The string APPAPT contains two PAT's as substrings. The first one is formed by the 2nd, the 4th, and ...

  5. SQL Server 系统库的备份与恢复

    master数据库 master作为数据库的主要数据库,记录着SQL Server系统的所有系统级信息,例如登录用户.系统配置设置.端点和凭证以及访问其他数据服务器所需要的信息.master数据库还记 ...

  6. 类型的实参与“LPTHREAD_START_ROUTINE”类型的形参不兼容

    在使用利用CreateThread创建线程时 struct A { DWORD WINAPI MyThreadFunction(LPVOID) {} void Run() { HANDLE hThre ...

  7. codeforces --- Round #250 (Div. 2) B. The Child and Set

    <传送门> [题目大意] 给你一个sum和一个limit,现在要你在1~limit中找到一些数来使得这些数的和等于sum,如果能找到的话就输出找到的数的个数和这些数,未找到输出" ...

  8. 手撕面试官系列(十)：面试必备之常问Dubbo29题+MySQL55题

    Dubbo专题 (面试题+答案领取方式见侧边栏) 1.Dubbo 支持哪些协议,每种协议的应用场景,优缺点?2.Dubbo 超时时间怎样设置?3.Dubbo 有些哪些注册中心?4.Dubbo 集群的负 ...

  9. 洛谷--P3808 【模板】AC自动机（“假的“简单版）

    如果你想要做出这道题,你需要先了解两个知识点: 1.字典树的构造 2.KMP算法(也就是fail指针的构造) 对于字典树,可以看看这个大佬: https://www.cnblogs.com/TheRo ...

  10. Delphi RSA加解密【 (RSA公钥加密，私钥解密)、(RSA私钥加密，公钥解密)、MD5加密、SHA加密】

    作者QQ:(648437169) 点击下载➨delphi RSA加解密 [Delphi RSA加解密]支持 (RSA公钥加密,私钥解密).(RSA私钥加密,公钥解密).MD5加密.SHA1加密.SHA ...