zoukankan      html  css  js  c++  java
  • 响应式开发移动端入门必备知识

    一、移动端布局计算

    • 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

  • 相关阅读:
    我是5型
    现在的我,有两个状态。我要去找第三个
    什么是BNF范式,什么又是EBNF范式?
    又是好久不写日志
    语料库资源汇总
    原生js与css3结合的电风扇
    JavaScript基础2
    JavaScript基础1
    JavaScript基础4
    JavaScript基础3
  • 原文地址:https://www.cnblogs.com/Leophen/p/11129854.html
Copyright © 2011-2022 走看看