rem是根据网页效果图的尺寸来计算的,当然还要借助媒体查询来完成。
例如你的设计稿如果是宽720px的话,那你的文字就要以原始大小除以11.25,就是对应下面媒体查询720px;例如16px的话就要16/11.25这样来计算。用之前要把下面这段代码放到你css文件里:
@media only screen and (max-width: 1080px) {
html, body {
font-size: 16.875px;
}
} @media only screen and (max-width: 960px) {
html, body {
font-size: 15px;
}
} @media only screen and (max-width: 800px) {
html, body {
font-size: 12.5px;
}
} @media only screen and (max-width: 720px) {
html, body {
font-size: 11.25px;
}
} @media only screen and (max-width: 640px) {
html, body {
font-size: 10px;
}
}

为什么在移动端用rem圆角不圆的更多相关文章

  1. css圆角不圆和1px方案

    1.圆角不圆 比如需要我们画一个 r 为 5px 的圆,如果我们使用 rem 作为单位,我们很快会发现在一些机型上的图案不圆,会呈现椭圆形.这是由于 rem 转 px 会存在精度丢失问题. 所以这个时 ...

  2. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  3. 移动端设置-----rem

    对于现在不同尺寸的移动端屏幕,如果设置px来说实在有点影响用户体验,在小屏幕上太大,大屏幕上太小,不能实现响应式,所以就引进了rem的概念. rem是相对于根元素<html> 在我的项目中 ...

  4. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  5. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  6. 移动端使用rem同时适应安卓ios手机原理解析,移动端响应式开发

    rem单位大家可能已经很熟悉,rem是随着html的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢 浏览器默认的字体大小为16px 及1rem 等于 16px 如果我们想要使1rem等于 ...

  7. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

  8. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

  9. 移动端网页 rem css书写

    移动端网页书写   css样式: @charset "utf-8";body,html{font-family: "微软雅黑";font-size:100px; ...

随机推荐

  1. [C++]数组处理相关函数(memcpy/memset等)

    头文件:string.h或者memory.h [1]void *memcpy(void *dest, const void *src, size_t n);//数组元素拷贝 功能:从源src所指的内存 ...

  2. [C++]PAT乙级1004. 成绩排名 (20/20)

    /* 1004. 成绩排名 (20) 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生 ...

  3. WIN10 困扰多时的屏幕亮度 终于可以调节了-完美 -更新2018年2月28日

    总结:很多问题是自己认知不够造成的,  -- 问题解决在  修复经历二,可直接跳过去看  修复经历二. 首先看你屏幕亮度是集成还是独立显卡决定的(一般是集成),所以下面 修复经历一折腾独立显卡驱动没什 ...

  4. js 一个对象的属性名是一个变量怎么处理?

    1.这种方法的属性(setAttrName)可以是一个变量. var obj = {}; obj[setAttrName] = 'Tom' 2.这样就可以动态的给js对象添加变量属性. var obj ...

  5. vue中如何让多个echarts随屏幕大小变化

    在vue项目中使用Echarts  一般window.onsize在页面中只能存在一个. 如何在一个页面中多个echarts使用window.onresize?    myChart 可以放在Data ...

  6. 正则表达式、BeautifulSoup、Lxml进行性能对比

    爬取方法 性能 使用难度 安装难度 正则表达式 快 困难 简单(内置) BeautifulSoup 慢 简单 简单 Lxml 快 简单 相对困难

  7. MySQL索引调优【转】

    一.关于查询计划 其实,关于所有的关系型数据库中,在运行T-SQL语句的时候,在查询器进行编译运行的同时,都会有着自己的内部的一个优化过程,而这优化之后的产物就是:执行计划. 在SQL SERVER中 ...

  8. Session、LocalStorage、SessionStorage、Cache-Ctrol比较

    1.Session Session是什么? 服务器通过 Set-Cookie给用户一个sessionIdsessionId对应 服务器 内的一小块内存每次用户访问服务器的时候,服务器就听过Sessio ...

  9. 移动硬盘和u盘的区别

    移动硬盘和U盘都属于便携性存储器,用于计算机之间的数据交换.但移动硬盘和U盘的区别还是非常大的,包括内部构造.容量以及整体外观上. 移动硬盘又分为机械移动硬盘和固态移动硬盘两种,主要区别在于内置的存储 ...

  10. hibernate框架学习第三天:对象状态、一级缓存、快照等

    对象的状态 瞬时状态: 瞬时对象(TO) 应用程序创建出来的对象,不受H3控制 注意:TO对象不具有OID,一旦为TO赋值OID,那么此时就不是TO 持久化状态:持久化对象(PO) 受H3控制的对象, ...