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 优点 就是可以 ...
随机推荐
- C++中栈结构建立和操作
什么是栈结构 栈结构是从数据的运算来分类的,也就是说栈结构具有特殊的运算规则,即:后进先出. 我们可以把栈理解成一个大仓库,放在仓库门口(栈顶)的货物会优先被取出,然后再取出里面的货物. 而从数据的逻 ...
- keras安装windows版
按照官网成功了.下面没有成功,貌似是 Anacode的问题 http://blog.csdn.net/hweiyi/article/details/70018317 http://blog.csdn. ...
- 4.XXE (XML External Entity Injection)
XXE (XML External Entity Injection) 0x01 什么是XXE XML外部实体注入 若是PHP,libxml_disable_entity_loader设置为TRUE可 ...
- 【service调用dao层传参的三种方式】
第一种方案:默认数组角标: service Public User selectUser(String name,String area); mapper: <select id="s ...
- asp.net刷新本页面的六种方法总结
第一: private void Button1_Click( object sender, System.EventArgs e ) { Response.Redirect( Reque ...
- Cactus详细讲解
Cactus建议一年以上有经验的人玩,刚入门MVC,不了解下列组件请先自行学习,切勿好高骛远. Cactus的组成(基于.net4.5.2):Dapper+MVC4+autofac 前端css框架pu ...
- NetCore 学习笔记(DI 实例生命周期)
Transient: 每一次GetService都会创建一个新的实例 Scoped: 在同一个Scope内只初始化一个实例,同一个请求内只会被创建一次 Singleton :整个应用程序生命周期 ...
- 基于 bootstrap 字体图标,用纯CSS实现星级评分功能
需要用到的图标 实现原理 关键属性是 text-overflow: clip;,表示直接截断文本.我们经常用这个属性的另一个值 text-overflow: ellipsis; 来做省略表示. 先平铺 ...
- POJ1321-棋盘问题
题目链接:点击打开链接 Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和 ...
- AT2672 Coins
传送门 按理说想到转化问题之后就不难了吧,可是我还是不会写 一个很容易想到的转化就是差分,将银币数和铜币数都减去金币数,这样就转化为\(x+y+z\)个钱币选\(y\)个银币和\(z\)个铜币的最大数 ...