响应式开发

响应式开发

• 1.响应式开发由来

  • 目前各个移动设备的大小参差不齐，针对每套设备制作一套页面，这样想法是不现实的，2010，提出了自适应网页设计这个名词，这是一种全新的设计理念
  • 制作一套页面，通过一些技术，让页面在pc端和移动端自动识别屏幕宽度，从而页面在各个设备上，都能显示成最佳的视觉效果

• 2.页面实施 只需要掌握以下四条规则，即可轻松实现响应式开发

  • 1】设置viewport视口:浏览器中页面的显示区域

    • pc端不需要设置viewport，视口指的是浏览器窗口

    • 移动端需要设置viewport，早期为了解决pc端页面在手机上显示的问题，设置了布局视口(layout viewport)，把布局视口的宽度设置成了980px，为了pc端页面在各个设备上都能显示完整，早期页面会按照设备宽度/980这样的比例缩放页面

    • 980初始设置的布局宽度，布局宽度可以改变，我们改成设备宽度

  • 2】页面布局使用相对单位

    • em(相对于父标签字体大小)百分比%(相对于父标签)【如果自己设置了字体大小就是根据自己的变化了】
    • rem(相对于根元素字体大小，只需要改变各个设备的根元素字体大小，从而改变页面的所有元素，长用于移动适配）

  • 3】引入媒体查询@media的使用

    • 实现根据屏幕宽度，页面做出自动调整的关键技术点
    • device-pixel-ratio设备像素比 常用的1.0,2.0,3.0
    • 设备像素比不一样直接决定–》普通屏幕还是高清屏幕
    • 小于2的设备–》普通屏幕
    • 大于2的设备–》高清屏幕
    • 高清屏幕比普通屏幕清晰很多，清晰度是他们最大的区别，同样大小的图片，像素点数越多，越清晰
  • 4】图片自适应
    
    • 响应式开发制作一套页面，图片通过max-width:100%,图片的宽度大于100%，则图片宽度变成100%，如果图片的宽度小于100%，则显示图片默认的大小
    • 移动适配
      根据设备像素比切相应倍数的图片
      dpr = 1 切1倍的图 @x1.png 100px 100px
      dpr = 2 切2倍的图 (需要显示 100px 100px –>切图实际大小@x2.png 200px 200px)
      dpr = 3 切3倍的图 @x3.png 300px 300px
      iphone5 width：320–》设计稿640
      iphone6 width：375–》设计稿750
      一般会选择切2倍的图