不同尺寸设计图 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行开销到底是一个什么样的结构,我们一起来看下 ...
随机推荐
- COGITATE | 分析当前热门软件的创新
热门软件分析实例一——Github [简介] gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub.作为一个分布式的版本控制系统,在Gi ...
- Linux安装Java与Eclipse
Linux安装Java和Eclipse 一.准备工作 1.下载jdk https://www.oracle.com/technetwork/java/javase/downloads/jdk8-do ...
- 【学术篇】洛谷1550——打井Watering Hole
题目の传送门:https://www.luogu.org/problem/show?pid=1550 精简版题意(本来就精简了不是么):n个点,每个点可以选择打井或从别的有水的点引水,求所有点都有水用 ...
- Qt分割线
方法:使用QFrame QFrame * line = new QFrame(); line->setFrameShape(QFrame::HLine); line->setFrameSh ...
- 解决Pycharm无法导入包问题 Unresolved reference
在pycharm中设置source路径 file–>setting–>project:server–>project structure 将放package的文件夹设置为source ...
- Linux时间和时区设定
一.时区设定 由于安装系统时采用了UTC,那么什么是UTC呢,简单的说UTC就是0时区的时间,是国际标准,而中国处于UTC+8时区. 使用tzselect命令,过程如下: 可以看到此环境变量已设置,将 ...
- ThreadLocal简析
简介 ThreadLocal在Java多线程开发中常见的一个类,在面试中也经见的问题,比如ThreadLocal的作用是什么,ThreadLocal的实现原理是什么等等.ThreadLocal是jav ...
- c语言学习笔记 - 指针和数组
结合内存存储数据的机制,c语言里指针的出现和使用也就不奇怪了,如果先学了内存的一些知识,以及程序运行机制,到了c指针这块就会清晰很多. #include <stdio.h> int mai ...
- 第二周——1.项目中MySQL版本问题
1.版本升级 经组长推荐,本地安装的是mysql-8.0.11,而主项目用的还是版本5.6, 因此需要升级版本. 首先,更新驱动:下载mysql-connector-java-8.0.11,将E:\P ...
- List -- 循环操作
1,单元循环 for…in 2,索引循环 for…in range(len(List)) 3,同时循环单元和索引 使用enumerate: for index, item in enumerate(L ...