不同尺寸设计图 rem 断点数据记录
320px宽的设计图
@media screen and (min-width: 320px) {
html {
font-size: 100px;
}
} @media screen and (min-width: 360px) {
html {
font-size: 112.5px;
}
} @media screen and (min-width: 400px) {
html {
font-size: 125px;
}
} @media screen and (min-width: 440px) {
html {
font-size: 137.5px;
}
} @media screen and (min-width: 480px) {
html {
font-size: 150px;
}
} @media screen and (min-width: 640px) {
html {
font-size: 200px;
}
} html {
font-size: 31.25vw;
}
640宽的设计图
@media screen and (min-width:320px){html{font-size:50px;}
}
@media screen and (min-width:360px){html{font-size:56px;}
}
@media screen and (min-width:400px){html{font-size:63px;}
}
@media screen and (min-width:440px){html{font-size:69px;}
}
@media screen and (min-width:480px){html{font-size:75px;}
}
@media screen and (min-width:640px){html{font-size:100px;}
}
html{font-size:-webkit-calc(100vw/6.4);font-size:calc(100vw/6.4);}
1080宽【莫名其妙的尺寸】
@media screen and (min-width: 320px) {
html {
font-size: 30px;
}
} @media screen and (min-width: 360px) {
html {
font-size: 33px;
}
} @media screen and (min-width: 400px) {
html {
font-size: 37px;
}
} @media screen and (min-width: 440px) {
html {
font-size: 41px;
}
} @media screen and (min-width: 480px) {
html {
font-size: 44px;
}
}
html {
font-size: -webkit-calc(100vw/10.8);
font-size: calc(100vw/10.8);
} @media screen and (min-width: 640px) {
html {
font-size: 60px;
}
}
1920px
@media screen and (min-width:320px){html{font-size:16px;}
}
@media screen and (min-width:360px){html{font-size:18px;}
}
@media screen and (min-width:400px){html{font-size:20px;}
}
@media screen and (min-width:440px){html{font-size:22px;}
}
@media screen and (min-width:480px){html{font-size:25px;}
}
@media screen and (min-width:640px){html{font-size:33px;}
}
html{font-size:-webkit-calc(100vw/19.2);font-size:calc(100vw/19.2);}
不同尺寸设计图 rem 断点数据记录的更多相关文章
- TDiocpCoderTcpServer返回数据记录有条数限制的问题
TDiocpCoderTcpServer返回数据记录有条数限制的问题 在使用TDiocpCoderTcpServer控件返回查询数据的时候,发现当记录条数超过一定数量的时候(比方有人反试图返回30万条 ...
- MySQL单表百万数据记录分页性能优化
背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我 ...
- SQL Server 存储(2/8):理解数据记录结构
在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下. 数据记录存储我们具体的数据,换句话说,它存在 ...
- MySQL 单表百万数据记录分页性能优化
文章转载自:http://www.cnblogs.com/lyroge/p/3837886.html 背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台 ...
- CSS3新的字体尺寸单位rem
CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...
- (转)ThinkPHP find方法 查询一条数据记录
find() ThinkPHP find() 方法是和 select() 用法类似的一个方法,不同之处 find() 查询出来的始终只有一条数据,即系统自动加上了 LIMIT 1 限制. 当确认查询的 ...
- MySQL查询数据表中数据记录(包括多表查询)
MySQL查询数据表中数据记录(包括多表查询) 在MySQL中创建数据库的目的是为了使用其中的数据. 使用select查询语句可以从数据库中把数据查询出来. select语句的语法格式如下: sele ...
- 清理8组nodes中表的历史数据,平均每个node中的表有1.5亿条记录,需要根据date_created字段清理8000W数据记录,这个字段没有索引。
清理8组nodes中表的历史数据,平均每个node中的表有1.5亿条记录,需要根据date_created字段清理8000W数据记录,这个字段没有索引. 环境介绍 线上磁盘空间不足,truncate ...
- SQL Server :理解数据记录结构
原文:SQL Server :理解数据记录结构 在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下 ...
随机推荐
- string json list
String str="[{\"cIndex\":14,\"column\":\"nextAdvice\",\"id\& ...
- opencv编译:opencv 3.4.1 编译 contrib模块,增加人脸识别
start cmake-gui select the opencv source code folder and the folder where binaries will be built (th ...
- 任意文件读取漏洞常用payload合集
直接整理到github上了,https://github.com/tdifg/payloads 其他payload以后不定期更新
- Eclipse 常用快捷键 (动画讲解)【转】
Eclipse 常用快捷键 (动画讲解)[转] Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的 ...
- Servlet3.0要点小结
1. 注解配置Servlet @WebServlet name属性: servlet名称 value属性或urlPatterns属性: servlet映射路径, 可配置多个 initParams属性: ...
- 微信公众号 SVG长按互动
<section class="" style="display: block;width: 100%;height:667px;overflow:hidden;m ...
- ubuntu挂载和挂载NTFS分区命令
1.挂载 首先安装NTFS-3g,不过Ubuntu一般自带: sudo apt install ntfs-3g 查看分区信息: sudo fdisk -l 结果类似: /dev/sda1 * ...
- Spring MVC(十二)--使用ModelView实现重定向
上一篇总结了使用返回字符串的方式实现重定向以及重定向过程中传递字符串参数和pojo参数的过程,本篇总结另一种重定向的实现方式--返回ModelAndView 这次的场景是这样的:在页面输入一些信息添加 ...
- Python学习day39-并发编程(各种锁)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- 【bzoj 4671】 异或图
题目 神仙题啊神仙题 显然这个东西一脸不可求的样子啊,这种东西我们显然需要搞一个容斥什么的 于是设\(g_i\)表示至少存在\(i\)个联通块(联通块内部的边没有要求,联通块和联通块之间不存在边)的方 ...