screen bsp 应用 屏幕 来看 比例 忽略 基础
rem 单位大家可能已经很熟悉,rem 是随着 html 的字体大小来显示代表宽度的方法,我们怎样进行移动端响应式开发呢
浏览器默认的字体大小为 16px 及 1rem 等于 16px
如果我们想要使 1rem 等于 12px 只需设置 html 的字体大小为 12/16 及 html 的字体大小为 font-size:75%
html {font-size:75%;}
我们再来看一下各个浏览器的屏幕宽度
iphone4 320
iphone5 320
iphone6 375
iphone6p 414
大部分的安卓手机屏幕显示宽度为 360
我们公司的设计是以 iphone6 为基础设计的 及以 375 的为准设计的
如果想在 iphone 其他版本中按 iphone6 比例自动缩放那么我们需要进行简单的缩放运算, 同时也以 1rem 等于 12px 为例
iphone4 320/375*75% = 64%
iphone5 320/375*75% = 64%
iphone6 375/375*75% =75%
iphone6p 414/375*75% =82.8%
安卓 360/375*75% =72%
我们可以这样设置在不同媒体中的字体的 rem 比例 由于安卓和 iphone6 区别较小,所以设置时忽略其差异
- html { - webkit - text - size - adjust: none;
- font - size: 75 % ;
- height: 100 % ;
- }@media screen and(min - width: 10px) and(max - width: 320px) {
- html {
- font - size: 64 % ;
- }
- }@media screen and(min - width: 414px) and(max - width: 768px) {
- html {
- font - size: 82.8 % ;
- }
- }
- /*字体大小 直接换算出10到20的字体大概代表多少rem 设置字体大小直接用class代替*/
- .s10 {
- font - size: 0.83rem;
- }.s11 {
- font - size: 0.913rem;
- }.s12 {
- font - size: 1rem;
- }.s13 {
- font - size: 1.079rem;
- }.s14 {
- font - size: 1.162rem;
- }.s15 {
- font - size: 1.245rem;
- }.s16 {
- font - size: 1.33rem;
- }.s17 {
- font - size: 1.411rem;
- }.s18 {
- font - size: 1.5rem;
- }.s20 {
- font - size: 1.66rem;
- }
用心了解以上内容在应用 rem 中会得心应手
移动端使用 rem 同时适应安卓 ios 手机原理解析,移动端响应式开发
来源: http://www.bubuko.com/infodetail-2094325.html