专栏首页小蔚记录html --- rem 媒体查询

html --- rem 媒体查询

rem是一种相对长度单位,参考的基准是<html>标签定义的font-size

viewport

做移动端的h5,通常会在HTML文件中指定一个<meta>标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">

媒体查询

手机屏幕的分辨率越来越高,比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图,其参考分辨率为1440*2560 px

  而在写CSS时,通常是以屏幕宽度为参考的。打开Chrome的响应式设计工具,就可以看到各种设备的屏幕宽度,比如iPhone 5的屏幕宽度是320*568 px,iPhone 6/6S的屏幕宽度为375*667 px。分辨率和屏幕宽度之间,是有一个倍屏系数换算的。

  设计师给了一张宽为1440px的UI图,而做不同设备的适配,就是前端工程师的职责了。

比如UI图上标注了某个段落的字体大小为64px。为了保证在各种屏幕上的不失真,就要根据实际屏幕宽度做等比例换算,才能写进CSS,即满足:

写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度

因此:

写入CSS的尺寸 = UI图标注的尺寸/UI图宽度*屏幕宽度
比如上例,当标注尺寸为64px、UI图宽度为1440px时,针对不同屏幕宽度,写入CSS的属性分别为:

屏幕宽度320px:font-size: 64/1440*320 = 14.22px
屏幕宽度360px:font-size: 64/1440*360 = 16px
屏幕宽度375px:font-size: 64/1440*375 = 16.67px
...
屏幕宽度1440px:font-size: 64/1440*1440 = 64px

  在<html>标签上只做一次媒体查询,而在p.intro上使用rem单位。

// 对html做媒体查询,定义基准的font-size
@media (min-width: 320px) {
    html {
        font-size: 14.22px;
    }
}
@media (min-width: 360px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 16.67px;
    }
}

@media (min-width: 1440px) {
    html {
        font-size: 64px;
    }
}

// CSS单位使用rem
p.intro {
    font-size: 1rem;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BUTTONS V. 2.0.0——CSS按钮库

    参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

    小蔚
  • 左右侧边栏固定宽,中间宽度自适应

    小蔚
  • react ---- Router路由的使用和页面跳转

    http://react-guide.github.io/react-router-cn/docs/Introduction.html

    小蔚
  • HTML5环形音乐播放器

    通过 HTML5,音乐在网络上东山再起。添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体...

    业余草
  • CSS 3.0实现卡片悬停立体特效

    越陌度阡
  • css实现悬浮效果的阴影

    王小婷
  • 骚气的置顶

    简单、
  • CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面。功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头...

    八哥
  • 用CSS实现当下最火的Neumorphism UI 风格

    最开始是一位来自乌克兰的设计师 Alexander Plyuto 在许多平台发布了自己设计的新作品。 接下来我们来看看这个作品是长什么样子的。

    学前端
  • 个人信息页面网页

    王凡汎

扫码关注云+社区

领取腾讯云代金券