css中添加屏幕自适应方法(rem)
只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可
/*竖屏*/
@media screen and (max-aspect-ratio: /){
html {font-size:calc(100vw / * );}
@media screen and (min-width: 750px) {
html{font-size:100px;max-width:750px;}
}
}
/*横屏*/
@media screen and (min-aspect-ratio: /) {
html {font-size:calc(100vmax / * );}
html .lockScreenTip {display:block;}
html.input_focus .lockScreenTip {display:none;}
@media screen and (min-width: 750px) {
html{font-size:100px;max-width:750px;}
}
}
css中添加屏幕自适应方法(rem)的更多相关文章
-
css中px,em和rem的区别
css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...
-
vue-cli中配置屏幕自适应(px2rem)
在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库. npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta ...
-
vue中添加util公共方法&;&;ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
-
width: calc(100% - 80px); 屏幕自适应方法
width: calc(100% - 80px); 屏幕自适应方法
-
彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
-
CSS中单位px和em,rem的区别
PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
-
彻底弄懂css中单位px和em,rem的区别 转的自己看
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
-
弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...
-
【转载】彻底弄懂css中单位px和em,rem的区别
原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...
随机推荐
-
hadoop2.6---windows下开发环境搭建
一.准备插件 1.自己编译 1.1 安装Ant 官网下载Ant,apache-ant-1.9.6-bin.zip 配置环境变量,新建ANT_HOME,值是E:\apache-ant-1.9.6:PAT ...
-
HDU 4647 Another Graph Game(贪心)
题目链接 思路题.看的题解. #include <cstdio> #include <string> #include <cstring> #include < ...
-
java中关于集合的知识点梳理
一:概述 1.集合的特点 只存储对象,集合长度是可变的,集合可以存储不同类型的对象. 2.集合框架 Collection List | | Set ArrayList Linked ...
-
OC中数组类NSArray的详解,常用属性和方法(一)
数组是一个有序的集合,OC中的数组只能存储对象类型, 但是对于对象的类型没有限制. 通过下标访问数组元素,下标从0开始. NSA
-
HDU 3696 Farm Game(dp+拓扑排序)
Farm Game Problem Description “Farm Game” is one of the most popular games in online community. In t ...
-
python 小记 整数与小数id
上图,id A =B id 1.0 c != d 以后少用 带小数后位的数字.调用内存地址不一样
-
Python基础知识学习_Day8
一.类的扩展方法 1.静态方法 语法:@staticmethod,静态方法不能访问公有属性,不能访问类.可在实例化后直接调用,并且在方法里可以通过self.调用实例变量或类变量. class eat( ...
-
阿里云CentOS安装firefox闪退
安装完vnc远程连接,接着安装firefox,点firefox木有任何提示就退 直接命令下运行,发现错误如下: /usr/lib/firefox/firefox: symbol lookup erro ...
-
spring mvc redirect设置FlashAttribute
在Controller中设置: @RequestMapping("/redir") public String redir(Model model, RedirectAttribu ...
-
在windows下运行spark
1.下载spark:spark-2.0.0-bin-hadoop2.7.tgz 2.解压至D:\bigdata\spark-2.0.0-bin-hadoop2.7 3.配置环境变量 HADOOP_HO ...