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

标题: 张锐杰-20221025-流式和flex布局 [打印本页]

作者: 张锐杰 时间: 2022-10-26 23:58
标题: 张锐杰-20221025-流式和flex布局
浏览器现状
PC端常用浏览器：
      360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器等等

移动端常用浏览器：
      UC浏览器、QQ浏览器、百度手机浏览器、搜狗浏览器、谷歌浏览器等等

总结：
      国内的浏览器一般都是根据Webkit修改过来的内核，所以如果要照顾兼容性，只处理webkit内核的浏览器即可。

手机屏幕现状
安卓设备的分辨率：
      480×800、480×854、720×1280、1080×1920等等，还有2k和4k等等。

iphone设备的分辨率
      640×960、640×1336、750×1334、1242×2208等等。

作为开发者，我们不需要重点去关注这些分辨率，因为我们常用的单位px

移动端调试的方法
Chorme DevTools  谷歌模拟手机调试（常用）
直接搭建本地web服务器，手机访问即可
直接用外网服务器，用ip来进行访问

视口
什么是视口（viewport）
      视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。

布局视口（Layout viewport）
      一般移动端的浏览器都默认设置了一个布局视口，用于解决早起的PC端页面在手机上的显示问题，基本这个视口的分辨率是980px，所以pc端页面大多都能在手机上呈现，但是元素看上去非常小，可以手动进行缩放

视觉视口（Visual viewport）
      用户正在看到的网站的区域，操作视觉视口时，不会影响布局视口。

理想视口（Ideal viewport）
      为了使网站在移动端有最理想的浏览和阅读宽度而设定的
      理想视口时设备最理想的视口尺寸
      需要使用meta视口标签来通知浏览器进行操作
      理想视口就是将布局视口的宽度修改为视觉视口的宽度

meta标签
      meta标签的属性说明
      默认设置为

物理像素和物理像素比
      物理像素点指的是屏幕显示的最小颗粒，是物理上真实存在的，在设备出厂时就设置好的，比如：iphone6：750×1334
      我们开发的时候用的单位1px ，但是1px不一定等于一个物理像素
      一个px能显示的物理像素点的个数，就叫做物理像素比。
      如果把一张100*100的图片放到手机里面会按照物理像素比进行缩放
      物理像素比的计算方式
         用设备的物理像素分辨率/开发的尺寸即可
         比如iphone6的屏幕尺寸是 750× 1334  开发的尺寸为375×667  所以物理像素比就是2

多倍图
      对于一张50px×50px的图片，在手机上打开，按照2倍的物理像素比，会将图片进行放大从而变模糊
      处理方式：
         1、将一个在pc端是100px×100px的图片先缩小为50px×50px
         2、将图片在移动端进行导入即可。

背景缩放
属性：
      background-size：背景图片的宽度背景图片的高度；

单位：
      长度/百分比/cover/contain
移动端开发选择及技术方案
移动端的主流方案
      1、单独制作移动端页面（主流）
         通常请况下，网站前会加m（mobile）
         打开设备时自动进行判断，如果是pc端就显示pc端的网站，如果是移动端设备，就跳转到移动端页面
         PC端和移动端是两套页面

      2、响应式网站
         pc端和移动端共用一套网站，在不同的屏幕下，网页的样式会自动进行适配
         例如：三星官网

移动端的技术解决方案
      1、移动端的浏览器兼容性问题
         国内的浏览器基本都是以webkit内核为主，因此只考虑webkit的兼容性即可
         我们可以放心的使用HTML5和CSS3

      2、移动端的公共样式
         推荐使用normalize.css
         优点：
            保护了有价值的默认值
            修复了一部分浏览器的bug
            模块化的
            拥有详细的文档

         下载网址
            http://necolas.github.io/normalize.css/
            将代码直接复制到nomalize.css文件中即可

      3、可以大量使用css3的盒子模型
         如果PC端需要多浏览器完全兼容，就用传统模式，如果不考虑兼容，或者在移动端使用，就可以直接是css3的盒子模型，也就是box-sizing:border-box;

      4、移动端的特殊样式

移动端常见的布局
      1、移动端单独制作（主流）
         流式布局
         flex弹性布局
         less+rem+媒体查询
         混合布局

      2、响应式布局（次要）
         媒体查询
         Bootstrap

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

Flex布局
传统布局和flex布局的对比
      传统布局：
         兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）

      Flex布局
         操作方便，布局简单，移动端应用广泛
         PC端有一定的兼容问题，但是目前大部分PC端浏览器也是支持flex布局的
         IE11以下不支持flex

      建议
         如果是PC端页面布局，最好是采用传统方式
         如果是移动端或者不考虑PC端兼容性的，都可以采用flex进行布局

Flex布局原理
      flex意思是弹性布局，任何一个盒子都可以指定为flex
      当我们给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效。
      采用Flex布局的元素，称为Flex容器（flex container）简称“容器”，它的所有的子元素自动成为容器成员，叫做Flex项目（flex item），简称“项目”。

Flex布局父项常见属性
      flex-direction：设置主轴的方向
         在flex布局中分为X轴和Y轴，默认的主轴是X轴，也就是水平向右，也可以将主轴设置为Y轴，也就是垂直向下
         注意：
            主轴和侧轴是会变化的，当设置X轴是主轴，那么Y轴就是侧轴，反之亦然。

         属性值
            row：沿X轴从左到右进行排列（默认值）
            row-reverse：沿X轴从右到左进行排列
            column：沿Y轴从上到下进行排列
            column-reverse：沿Y轴从下到上进行排列

      justify-content:设置主轴上的子元素的排列方式
         属性：
            flex-start:
                  默认值，从头部开始，如果主轴是X就是从左到右

            flex-end:
                  沿主轴的尾部开始进行排列

            center：
                  在主轴上进行居中对齐（如果主轴是X就代表水平居中）

            space-around:
                  所有子项平分剩余空间

            space-between：
                  先让两侧的盒子贴边，然后再平分剩余的空间

      flex-wrap：设置子元素是否换行
         默认情况下，项目都在一条线上，不进行换行操作。
         属性值
            nowrap：不换行（默认值）
            wrap：换行

      align-items：设置侧轴上的子元素的排列方式（单行）
         注意：要在侧轴上子项是单行的时候使用
         属性值：
            flex-strat：从头开始
            flex-end：从尾部开始
            center：居中显示
            stretch：拉伸

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