rem媒体查询
- @media only screen and (min-width: 1080px), only screen and (min-device-width:1080px) {
- html,body {
- font-size:168.75px;
- }
- }
- @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
- html,body {
- font-size:168.75px;
- }
- }
- @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
- html,body {
- font-size:150px;
- }
- }
- @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
- html,body {
- font-size:125px;
- }
- }
- @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
- html,body {
- font-size:112.5px;
- }
- }
- @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
- html,body {
- font-size:100px;
- }
- }
- @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
- html,body {
- font-size:93.75px;
- }
- }
- @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
- html,body {
- font-size:84.375px;
- }
- }
- @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
- html,body {
- font-size:75px;
- }
- }
- @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
- html,body {
- font-size:64.6875px;
- }
- }
- @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
- html,body {
- font-size:62.5px;
- }
- }
- @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
- html,body {
- font-size:58.59375px;
- }
- }
- @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
- html,body {
- font-size:56.25px;
- }
- }
- @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
- html,body {
- font-size:50px;
- }
- }
- @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
- html,body {
- font-size:37.5px;
- }
- }
rem媒体查询的更多相关文章
- 【译】PX、EM还是REM媒体查询?
原文链接:https://zellwk.com/blog/media-query-units/ 你有没有想过使用媒体查询的时候到底该用px.em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也 ...
- html --- rem 媒体查询
rem是一种相对长度单位,参考的基准是<html>标签定义的font-size. viewport 做移动端的h5,通常会在HTML文件中指定一个<meta>标签: <m ...
- Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....
一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...
- 移动端响应式布局--你不知道的CSS3.0媒体查询,解决rem部分情况下无法适配的场景
媒体查询作为响应式布局的方法之一,实际项目中用途也很广.但是你真的知道怎么用吗? 例如,下面匹配 iphone6/7/8 屏幕 @media screen and (max-width: 375px) ...
- 从设计图到CSS:rem+viewport+媒体查询+Sass
根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的 ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
随机推荐
- [51nod1270] 数组的最大代价(简单dp)
解题关键:先由贪心的思想得出任何一个位置只能取1或者a[i],然后dp即可. #include<bits/stdc++.h> using namespace std; typedef lo ...
- SQL标量值函数:返回汉字拼音首拼
今天遇到一个需求,客户要求在系统客户端选择客户的时候,可以用拼音首拼去快速过滤选择,此时我们在客户表里面加多一个拼音首拼字段CustPY来记录,字段加好了,我们要把所有客户名称的拼音简拼都更新到Cus ...
- error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法
error C2872: "flann": 不明确的符号 - PCL 与OpenCV2命名空间冲突问题的解决方法 error C2872: "flann" 如果 ...
- 大富翁开发日记:一、使用巨型lua协程
一个大胆的尝试:使用巨型lua协程来表示整个“一局”流程. lua协程是一个很另类的功能,有并发的影子但又不是真的并发,所以真正拿它来做大功能框架的范例不多,通常用于一些小型trick式设计.但这次我 ...
- ubuntu判断系统是32位还是64位
1. 打开终端. 2. 输入命令 sudo uname -m 3. 如果输出为 x86_64, 则说明是64位操作系统:如果输出为 i686,说明是32位操作系统.
- Webservice 或者HttpRequest请求的时候提示 “指定的注册表项不存在”错误 解决方案
今天又遇到神奇的事情,在使用WebService的时候居然提示“指定的注册表不存在.” The specified registry key does not exist. Google后发现,原来是 ...
- Linux操作系统的内存使用方法详细解析
我是一名程序员,那么我在这里以一个程序员的角度来讲解Linux内存的使用. 一提到内存管理,我们头脑中闪出的两个概念,就是虚拟内存,与物理内存.这两个概念主要来自于linux内核的支持. Linux在 ...
- DESede/CBC/PKCS5Padding
Java.security.NoSuchAlgorithmException: Cannot find any provider supporting DESede/CBC/PKCS5Padding ...
- SCUT - 337 - 岩殿居蟹 - 线段树 - 树状数组
https://scut.online/p/337 这个东西是个阶梯状的.那么可以考虑存两棵树,一棵树是阶梯的,另一棵树的平的,随便一减就是需要的阶梯. 优化之后貌似速度比树状数组还惊人. #incl ...
- return die exit 常用
die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续代码,exit()可以显示内容.return就是纯粹的返回 ...