该媒体查询适配规则是以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. Multi-Channel Buffers

    This describes a 4 channels buffer of 16 bit samples.Data organisation :Sample 1, front left speaker ...

  2. (三)Java数据结构和算法——冒泡、选择、插入排序算法

    一.冒泡排序 冒泡算法的运作规律如下: ①.比较相邻的元素.如果第一个比第二个大,就交换他们两个. ②.对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.这步做完后,最后的元素会是最大的数( ...

  3. fail2ban的功能和特性(实测)

    fail2ban的功能和特性 https://fedoraproject.org/wiki/Fail2ban_with_FirewallD 1.支持大量服务.如sshd,apache,qmail,pr ...

  4. 008 SpringCloud 学习笔记4-----Ribbon负载均衡

    1.Ribbon概述 实际环境中,我们往往会开启很多个itcast-service-provider的集群.此时我们获取的服务列表中就会有多个,到底该访问哪一个呢? Eureka中已经帮我们集成了负载 ...

  5. STL源码剖析——序列式容器#3 Deque

    Deque是一种双向开口的连续线性空间.所谓的双向开口,就是能在头尾两端分别做元素的插入和删除,而且是在常数的时间内完成.虽然Vector也可以在首端进行元素的插入和删除(利用insert和erase ...

  6. C++构造和解析JSON

    JSON是一种轻量级的数据交互格式,易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率,实际项目中经常用到,相比xml有很多优点,问问度娘,优点一箩筐. 第三方库 json解析选用j ...

  7. Mongodb 的事务在python中的操作

    代码实现如下: import pymongo mgClient = pymongo.MongoClient("ip", "port") session = mg ...

  8. 手把手教你做JavaWeb项目:登录模块

    现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用 ...

  9. 【题解】Luogu P5405 [CTS2019]氪金手游

    原题传送门 我们珂以先考虑一条链的情况,设\(sum\)为所有\(w_i\)的总和,\(Sw_i\)表示\(\sum_{j=i}^nw_i\) \[1 \rightarrow 2 \rightarro ...

  10. 【题解】Luogu P5328 [ZJOI2019]浙江省选

    原题传送门 看起来挺妙实际很暴力的一题 已知每个选手的分数都是平面上的直线 题目实际就是让我们求每条直线在整点处最大是第几大 我们考虑先对所有的直线进行半平面交(因为\(a_i\)都是正整数,所以比普 ...