响应式开发移动端入门必备知识

一、移动端布局计算

  • Flex

   采用Flex布局的元素,它的所有子元素自动成为容器成员,可以自动分配空间,适合做移动端开发

  • rem

   在不同的设备上显示不同的效果,因此适合做移动端开发

二、移动设备常见属性

  • physical pixel

   物理像素值(屏幕分辨率)

  • device-independent pixel

   设备独立像素(当前浏览器的宽高)

  • device pixel ratio

   设备像素比(设备像素比 = 物理像素 / 设备独立像素)

  • PPI

   每英寸的像素值

三、Viewport (指设备的屏幕上能用来显示网页的区域) <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user->scalable=no"> /*参数说明   width : 设置layout viewport 宽度,值为一个正整数,或字符串"width-device"   height:设置layout viewport 高度,这个属性很少使用   initial-scale :设置页面初始缩放值,值为一个数字,可以是小数   minimum-scale : 设置页面最小缩放值,值为一个数字,可以是小数   maximum-scale : 设置页面最大缩放值,值为一个数字,可以是小数   user-scalable : 是否允许用户进行缩放,值为"no"或"yes" */

四、度量单位

  • em

   相对长度单位,相对于当前对象内文本的字体尺寸,根据父元素的大小变化而变化

  • rem

   相对长度单位(r指root),相对于根元素(即 html 元素)font-size 的倍数,不会被它的父元素影响

  • vw

   相当于视窗高度的 %,单位为vw

  • vh

   相当于视窗宽度的 %,单位为vh

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券