菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 薛伯一-20221025-Web移动端流式布局和flex布局 [打印本页]

作者: Paracelsus 时间: 2022-10-26 00:05
标题: 薛伯一-20221025-Web移动端流式布局和flex布局

Web移动端流式布局和flex布局

一、       手机屏幕现状
      安卓设备的分辨率：
            480x800、480x584、720x1280、1080x1920等等，还有2k和4k等等
      iPhone设备的分辨率：
            640x960、640x1336、750x1334、1242x2208等等
      作为开发者、我们不需要重点关注这些分辨率，因为我们常用的单位px
移动端调试的方法
      Chrome DevTools 谷歌模拟手机调试（常用）
      直接搭建本地web服务器，手机访问即可
      直接用外网服务器，用IP来进行访问
视口
   什么是视口？
      视口就是浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口
   布局视口（Layout viewport）
      一般移动端的浏览器都是默认设置了一个布局视口，用于解决早些的PC端页面在手机上的显示问题，基本这个视口的分辨率是980px，所以pc端页面大多数都能在手机上呈现，，但是元素看上去非常小，可以手动缩放
   视觉视口：
      用户正在看到的网站的区域，操作视觉视口时，不会影响布局视口
   理想视口
      为了使网站在移动端有最理想的浏览器和阅读器宽度而设定的
      理想视口是设备最理想的视口尺寸
      需要使用meta视口标签来通知浏览器进行操作
      理想视口就是将布局视口的宽度修改
meta标签
   meta标签的属性说明

物理像素和物理像素比
   物理像素点指的是屏幕显示的最小颗粒，是物理上真实存在的，在设备出场时就设置好的，比如：iPhone6：750x1334
   我们开发的时候用的单位1px,但是1px不一定等于一个物理像素
   一个px能显示的物理像素点的个数，就叫做物理像素比。
   如果把一张100x100的图片放到手机里面会按照物理像素比进行缩放
   物理像素比的计算方式
      用设备的物理像素分辨率/开发的尺寸即可
      比如iPhone6的屏幕时750x1334开发的尺寸为375x667所以物理像素比就是2
多倍图
   对一张50px*50px的图片，在手机上打开，按照2倍的物理像素比，会将图片进行放大从而变模糊
   处理方式：
      1.将一个在pc端是100px*00px的图片先缩小为50px*50px
      2.将图片在移动号端进行导入即可。
背景缩放
   属性：background-size:背景图片的宽度背景图片的高度；
      单位：长度/百分比/cover/contain
移动端开发选择方案
   移动端的主流方案
      1.单独制作移动端页面（主流）

            打开设备时自动进行判断，如果是PC端就显示pc端的网站，如果是移动设备，就跳转到移动端网站
            pc端和移动端是两套页面
      2.响应式网站
         pc端和移动端公用一套网站，在不同屏幕下进行适配
   移动端的技术解决方案
      1.移动端的浏览器兼容性问题
            国内的浏览器基本上是以Webkit内核为主，因此只考虑weblit的兼容性即可
            我们可以放心使用html5和css3
      2.移动端的公共样式
         推荐使用normalize.css
         优点：
               保护了有价值的默认值
               修复了一部分浏览器bug
               模块化的
               具有详细的文档
   可以大量使用css3的盒子模型
      如果PC端需要多浏览器完全兼容，就用传统模式，如果不考虑兼容性问题，或者在移动端使用，就可以直接是css3的盒子模型，也即是box-sizing：border-box；

移动端常见的布局
   1.移动端单独制作（主流）
      流式布局
      flex弹性布局
      less+rem+媒体查询
      混合布局
   2.响应式布局（次要）
      1.媒体查询
      2.Bootstrap

流式布局
   概念：
      流式布局就是百分比布局，也叫做非固定像素布局
      通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应式拉伸的目的，不受像素值限制

flex布局
   传统布局和flex布局的对比
      传统布局：兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）
      Flex布局：操作简单，移动端应用广泛
               PC端有一定的兼容性问题，但是目前大部分PC端浏览器也是支持flex布局的
               IE11以下不支持flex
      建议：如果PC端页面布局，最好采用传统布局方式
               如果是移动端或者不考虑PC端兼容性的，都可以采用flex布局
      原理：
               flex意思时弹性布局，任何一个盒子都可以指定为flex
               当我们给父级元素制定了flex布局后，里面的子元素的float、clear和vertical-align属性都将失失效
               采用flex布局的元素称为Flex容器，他的所有子元素自动成为容器成员，叫做项目

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)