【css】移动端响应式布局与响应式字体大小 | 您所在的位置:网站首页 › vscode文字居中代码响应式 › 【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。 以此类推,我们可以根据不同的设备、浏览器宽度大小来设置不同的样式。这就是响应式了。 一、remrem是我个人比较喜欢用的一个计算单位了,rem是根据html的根元素标签的font-size的大小来计算的。(这也意味着,完全不用担心,设置父元素标签对子元素标签带来影响)。 rem用法: html { font-size:100px; } .testDiv { width:5rem; height:2.5rem; font-size:0.28rem; background:#ccc;} hello world我给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. ①、代码 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】移动端自适应布局与字体大小自适应 |
CopyRight 2018-2019 实验室设备网 版权所有 |