移动端html字体大小自适应,【css】移动端响应式布局与响应式字体大小
前言:移动设备(手机、平板电脑等),已经逐渐成为人们生活中必不可缺的物件了,这也意味着人们更多的用移动设备浏览网页。然而移动设备有着各式各样的分辨率与大小,这使用前端开发人员不得不去设配它们。
相关链接:【css】移动端自适应布局与字体大小自适应
前言二: 说到移动设备,一个不得不提就是viewport的设置了
其中:①、width=device-width:是设置可视区宽度等于设备宽度
②、initial-scale=1.0:初始化缩放比例
③、maximum-scale=1.0:最大可以放大的比例
④、minimum-scale=1.0:最小可以缩小的比例
⑤、user-scalable = 0: 是否允许用户缩放(1为true,0为false)
前言三: 说到移动设备,还有个不得不说的就是响应式了
html { font-size:100px; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }/*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } } /*i6Plus,i7Plus宽度*/
@media(max-width:375px){ html { font-size:58.59px; } }/*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }/*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }/*i5宽度*/
代码中的效果:
当设备、浏览器宽度大小(小于等于)540px的时候,html的font-size就不再是100px,而是84.375px。
同样的当设备、浏览器宽度大小(小于等于)480px的时候,html的font-size就不再是84.375px,而是75px。
以此类推,我们可以根据不同的设备、浏览器宽度大小来设置不同的样式。这就是响应式了。
一、rem
rem是我个人比较喜欢用的一个计算单位了,rem是根据html的根元素标签的font-size的大小来计算的。(这也意味着,完全不用担心,设置父元素标签对子元素标签带来影响)。
rem用法:
html { font-size:100px; }
.testDiv { width:5rem; height:2.5rem; font-size:0.28rem; background:#ccc;}
我给html根元素设置了font-size为100px, 然后我给.testDiv设置了5rem(500px)的宽度、2.5rem(250px)的高度、0.28rem(28px)的字体大小。
(这不难看出来,rem就是与html根元素font-size字体大小相乘的计算单位)
如果我html根元素font-size字体大小是100px, 那5rem相当于5*100等于500px
如果我html根元素font-size字体大小是200px,那5rem相当于5*200等于1000px
(margin值,padding值都可以用rem设置)
移动端设配demo:
①、测试图片 :测试图片的宽度为640px,高度为200px,字体为宋体,大小为28px.
①、代码
"en">
test
html { font-size:100px; }
body { margin:0; }
.content { width:100%; max-width:640px; min-width:320px; margin:0 auto; }
.content img { width:100%; }
.testDiv { width:100%; height:2rem; line-height:2rem; font-size:.28rem;
font-family:"宋体"; font-weight:bold; text-align:center; background:#ccc; color:#fff; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }/*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } } /*i6Plus,i7Plus宽度*/
@media(max-width:375px){ html { font-size:58.59px; } }/*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }/*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }/*i5宽度*/
先运行代码:可以发现(灰色的,我们设置的.testDiv的大小跟字体大小就可以跟着 “测试图片”大小那样去改变了,实现了设配移动端的效果)。
---------------------------
这样我们只需在640px(640px是因为我这边的UI喜欢用640px的设计图,大家视情况改变)重构好页面效果,剩下的只需去修改各个分辨率下的html根元素的font-size大小了。那么问题来了,如何设置html根元素的font-size。
还是以640px为例子。100为html根元素的font-size起始大小
①、当设备宽度为375px,我们只需用375/640*100=58.59px; 这时设置的html元素的font-zise为58.59px;
①、当设备宽度为320px,我们只需用320/640*100=50px; 这时设置的html元素的font-zise为50px;
这里添加下rem的兼容效果
二、em
em的使用方法跟rem差不多,还是有一些区别。不同之处在于,em是根据标签元素自身的font-size来计算(宽高设置根据当前元素font-size),而元素自身的font-size又受他父级元素的font-size的影响,这很容易导致错误。而em计算单位的唯一优势就是它的兼容效果更佳。
问题①:父级元素干扰
html { font-size:100px; }
.content { font-size:0.5em; }
.testDiv { width:5em; height:2.5em; background:#ccc; }
页面效果
这时候.testDiv的宽度不再是500px;而是变成250px。因为.testDiv的父级.content的font-size变成了50px(0.5em);所以这时候再给.testDiv设置5em的宽度变成了(50px*5=250px);
问题②:自身元素设置字体干扰
html { font-size:100px; }
.testDiv { width:5em; height:2.5em; font-size:0.5em; background:#ccc; }
页面效果
这次不再是给.testDiv的父级设置字体大小,而是跟他本身设置了font-size(0.5em);而.testDiv还是变成了250px。因为这时候计算单位已经根据元素自身的font-size的来计算的了。
em计算单位的唯一优势就是它的兼容效果了。
----------------------------------------------------------------------------------
补充:设计图750px;常用配制
html { font-size:100px; font-family:'微软雅黑','苹方','思源黑体'; } /*效果图750px*/
@media(max-width:640px){ html { font-size:85.33px; } } /*Android常用宽度*/
@media(max-width:540px){ html { font-size:72px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:64px; } } /*Android常用宽度*/
@media(max-width:445px){ html { font-size:60px; } }
@media(max-width:414px){ html { font-size:55.2px; } } /*i6Plus,i7Plus宽度*/
@media(max-width:375px){ html { font-size:50px; } } /*i6,i7宽度*/
@media(max-width:360px){ html { font-size:48px; } } /*Android常用宽度*/
@media(max-width:320px){ html { font-size:42.67px; } } /*i5宽度*/
相关链接:【css】移动端自适应布局与字体大小自适应
移动端html字体大小自适应,【css】移动端响应式布局与响应式字体大小相关推荐
- 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
- css img 适配尺寸_HTML+CSS图片大小自适应~PC电脑端、手机端
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...
- html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...
- 图片大小自适应、pc端、手机端
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: <style>div{width:400px;height:400px;border:1px solid #000; }img ...
- vueweb端响应式布局_响应式网站和PC+手机端网站有什么区别?
企业建站普遍会遇到这样一个选择难题:网站选择什么类型? 常见的类型分为3种:PC端,PC+手机端,响应式.PC端大家都知道,主要的选择难点是后两种有什区别.今天小编就帮大家来分析一下响应式网站和PC+ ...
- vueweb端响应式布局_vue响应式原理图文详解
Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system).模型层(model)只是普通JS对象,修改它则更新视图(view).这会让状态管理变得非常简单且直观,不过理解 ...
- html+css移动端布局
文章目录 移动端 一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结 二.视口 **1.布局视口** `layo ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- CSS 系列七 高级技巧篇 精灵图 、字体图标 、CSS三角 、 图片和文字对齐以及bug 、溢出文字省略号 、CSS 初始化 、 常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
- 视频教程-HTML5和CSS3移动端开发全套教程-HTML5/CSS
HTML5和CSS3移动端开发全套教程 拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强, ...
最新文章
- CSS的!important属性修改权重
- day04--课后练习
- 使用事件委托降低重复的事件绑定,从而降低dom操作的对性能的消耗[兼容IE版]
- Greenplum 权限管理与客户端认证
- react js 添加样式_如何在React JS Application中添加图像?
- pymysql建表_Python数据库操作,针对pymysql 和 MYSQL数据库
- windows下使用Nginx服务器实现负载均衡方法
- mysql 语法错误检查,解决引号的使用错误1064(42000):SQL语法有错误;检查与您的MySQL服务器版本相对应的手册以使用正确的语法?...
- java实现豆瓣回帖机器人
- h3c Telnet配置实验
- 毕业半年,帅地人生的第一个一百万
- 5W1h分析法分析---play框架
- java.lang.ClassCastException: org.apache.hadoop.mapreduce.lib.input.FileSplit cannot be cast to...
- npm报错 443(error : getaddrinfo enotfound registry.npmjs.org registry.npmjs.org:443)
- qq邮箱如何在win10邮箱连接到服务器,win10自带邮箱如何使用?win10自带邮箱如何同步qq邮箱邮件?...
- 如何搭建App自动化测试框架?
- 外部无法连接部署在linux上的MongoDB
- 【C语言进阶】字符串函数模拟实现
- Python编程进阶 高级变量(看完就会了)
- python_机器学习—数据科学库_DAY01DAY02
热门文章
- SPSS中的数据分析—信度效度检验【1】
- 通过dns2tcp绕过校园网认证进行免费上网
- 计算机网络hdcp是什么意思,HDCP技术_百科..doc
- java 读取写入excel_java读取和写入Excel文件
- 四种常见的颜色模式及各自的特点?
- docker配置加速器的几种方案
- python经纬度转换xy坐标公式 pyqt_EXCEL公式进行经纬度与XY坐标的相互转换
- PowerDesigner建立数据库模型
- 电感的主要特性参数介绍
- 鲍斯科机器人_芜湖鲍斯柯机器人有限公司、上海富治机械科技有限公司服务合同纠纷二审民事判决书...