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 断点数据记录的更多相关文章

  1. TDiocpCoderTcpServer返回数据记录有条数限制的问题

    TDiocpCoderTcpServer返回数据记录有条数限制的问题 在使用TDiocpCoderTcpServer控件返回查询数据的时候,发现当记录条数超过一定数量的时候(比方有人反试图返回30万条 ...

  2. MySQL单表百万数据记录分页性能优化

    背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我 ...

  3. SQL Server 存储(2/8):理解数据记录结构

    在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下. 数据记录存储我们具体的数据,换句话说,它存在 ...

  4. MySQL 单表百万数据记录分页性能优化

    文章转载自:http://www.cnblogs.com/lyroge/p/3837886.html 背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台 ...

  5. CSS3新的字体尺寸单位rem

    CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...

  6. (转)ThinkPHP find方法 查询一条数据记录

    find() ThinkPHP find() 方法是和 select() 用法类似的一个方法,不同之处 find() 查询出来的始终只有一条数据,即系统自动加上了 LIMIT 1 限制. 当确认查询的 ...

  7. MySQL查询数据表中数据记录(包括多表查询)

    MySQL查询数据表中数据记录(包括多表查询) 在MySQL中创建数据库的目的是为了使用其中的数据. 使用select查询语句可以从数据库中把数据查询出来. select语句的语法格式如下: sele ...

  8. 清理8组nodes中表的历史数据,平均每个node中的表有1.5亿条记录,需要根据date_created字段清理8000W数据记录,这个字段没有索引。

    清理8组nodes中表的历史数据,平均每个node中的表有1.5亿条记录,需要根据date_created字段清理8000W数据记录,这个字段没有索引. 环境介绍  线上磁盘空间不足,truncate ...

  9. SQL Server :理解数据记录结构

    原文:SQL Server :理解数据记录结构 在SQL Server :理解数据页结构我们提到每条记录都有7 bytes的系统行开销,那这个7 bytes行开销到底是一个什么样的结构,我们一起来看下 ...

随机推荐

  1. Android开发 WebView的详解

    前言 WebView 是Android显示html内容的主要方式,当然TextView也可以加载html内容.但是WebView除了功能更加强大,最重要的是还能调用Html里的JavaScript语言 ...

  2. Android开发 ViewPager删除Item后,不会更新数据和View

    问题描述: 在使用ViewPager的适配器删除适配器里一个Item后依然会,而删除的这个item依然会保留缓存,适配器不会重新加载更新数据.如下代码: public class TReleaseCi ...

  3. idea-----Intellij IDEA配置tomcat(非maven项目)

    Intellij IDEA配置tomcat(非maven项目) 引用: https://blog.csdn.net/springlovejava/article/details/78570241 ID ...

  4. W: 仓库 “http://ppa.launchpad.net/levi-armstrong/qt-libraries-trusty/ubuntu xenial Release” 没有 Release 文件。

    解决办法:将对应的PPA删除掉即可 使用以下命令切换到对应PPA目录: cd /etc/apt/sources.list.dsudo rm levi-armstrong-ubuntu-qt-libra ...

  5. C++ Builder 2007中应用数据库SQLite(转载)

    第一次使用SQLite数据库,而且BCB2007也不熟,这两者的结合那就更让我难受了.今天只是简单的在BCB中调用SQLite,就花了我一下午时间,这也足见本人知识的浅薄,另一方面也说明我对这二者确实 ...

  6. Java-JPA:JPA

    ylbtech-Java-JPA:JPA JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对 ...

  7. An invalid property 'jdbcType ' was found in mapping

    大概2种原因: 1 放进去的类型与字段的类型不匹配 2 比较变态,xml中=两边不能有空格! 错误示例如下:  #{plat,jdbcType = INTEGER}, 去掉空格后: #{plat,jd ...

  8. vue 全局方法(单个和多个方法)

    参考: https://www.cnblogs.com/zhcBlog/p/9892883.html          https://blog.csdn.net/xuerwang/article/d ...

  9. nulls_hlist原理 和 tcp连接查找

    原文链接 http://abcdxyzk.github.io/blog/2018/09/28/kernel-sk_lookup/

  10. 在vue中使用pug

    安装pug npm i pug pug-loader pug-cli pug-filters -D pug :安装pug pug-loader:pug的loader pug-cli:pug 编译工具 ...