css中添加屏幕自适应方法(rem)

时间:2022-08-20 09:33:45

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)的更多相关文章

  1. css中px,em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  2. vue-cli中配置屏幕自适应(px2rem)

    在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库. npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta ...

  3. vue中添加util公共方法&amp&semi;&amp&semi;ES6之import、export

    vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...

  4. width&colon; calc&lpar;100&percnt; - 80px&rpar;&semi; 屏幕自适应方法

    width: calc(100% - 80px); 屏幕自适应方法

  5. 彻底弄懂css中单位px和em&comma;rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. CSS中单位px和em&comma;rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. 彻底弄懂css中单位px和em&comma;rem的区别 转的自己看

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...

  8. 弄懂css中单位px和em&comma;rem的区别

              国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小 ...

  9. 【转载】彻底弄懂css中单位px和em&comma;rem的区别

    原文链接:http://www.cnblogs.com/leejersey/p/3662612.html 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什 ...

随机推荐

  1. hadoop2&period;6---windows下开发环境搭建

    一.准备插件 1.自己编译 1.1 安装Ant 官网下载Ant,apache-ant-1.9.6-bin.zip 配置环境变量,新建ANT_HOME,值是E:\apache-ant-1.9.6:PAT ...

  2. HDU 4647 Another Graph Game&lpar;贪心&rpar;

    题目链接 思路题.看的题解. #include <cstdio> #include <string> #include <cstring> #include &lt ...

  3. java中关于集合的知识点梳理

    一:概述 1.集合的特点 只存储对象,集合长度是可变的,集合可以存储不同类型的对象. 2.集合框架     Collection    List | | Set ArrayList    Linked ...

  4. OC中数组类NSArray的详解&comma;常用属性和方法&lpar;一&rpar;

    数组是一个有序的集合,OC中的数组只能存储对象类型, 但是对于对象的类型没有限制. 通过下标访问数组元素,下标从0开始. NSA

  5. HDU 3696 Farm Game(dp&plus;拓扑排序)

    Farm Game Problem Description “Farm Game” is one of the most popular games in online community. In t ...

  6. python 小记 整数与小数id

    上图,id A =B id 1.0  c != d 以后少用 带小数后位的数字.调用内存地址不一样

  7. Python基础知识学习&lowbar;Day8

    一.类的扩展方法 1.静态方法 语法:@staticmethod,静态方法不能访问公有属性,不能访问类.可在实例化后直接调用,并且在方法里可以通过self.调用实例变量或类变量. class eat( ...

  8. 阿里云CentOS安装firefox闪退

    安装完vnc远程连接,接着安装firefox,点firefox木有任何提示就退 直接命令下运行,发现错误如下: /usr/lib/firefox/firefox: symbol lookup erro ...

  9. spring mvc redirect设置FlashAttribute

    在Controller中设置: @RequestMapping("/redir") public String redir(Model model, RedirectAttribu ...

  10. 在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 ...