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

标题: 康利-20221025-流式布局与flex布局 [打印本页]

作者: 智商不在服务区 时间: 2022-10-25 23:45
标题: 康利-20221025-流式布局与flex布局
一、学习内容：
1.概述
移动端的调试方法常用Chrome Dev tools谷歌模拟手机调试
视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
布局视口：一般移动端的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上的显示问题，基本这个视口的分辨率是980px，所以平常端页面大多都能在手机上呈现，但是元素看上去非常小，可以手动进行缩放
视觉视口：用户正在看到的网站的区域，操作视觉视口时，不会影响布局视口。
理想视口：为了使网站在移动端有最理想的浏览器和阅读宽度而设定的
理想视口就是将布局视口的宽度修改为视觉视口的宽度
物理像素点指的是屏幕显示的最小颗粒，是物理上真实存在的，在设备出厂时就设置好的，比如iPhone6:750×1334
物理像素比的计算方法：用设备的物理像素分辨率除以开发的尺寸即可
多倍图：对于一张50px×50px的图片，在手机上打开，按照2倍的物理像素比，会将图片进行放大从而变模糊
背景缩放：属性：background-size：背景图片的宽度背景图片的高度；
2.移动端开发选择与技术方案
PC端和移动端共用一套网站，在不同的屏幕下，网页的样式会自动进行适配
国内的浏览器基本都是以webkit内核为主，因此只考虑webkit的兼容性即可
如果PC端需要多浏览器完全兼容，就用传统模式，如果不考虑兼容性，或者在移动端使用，就可以直接使用css3的盒子模型，也就是box-sizing：border-box；
3.流式布局
概念：流式布局就是百分比布局，也叫做非固定像素布局
通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应伸缩的目的，不受固定像素的限制
4.flex布局
传统布局：兼容性好，布局繁琐，局限性（不能在移动端进行很好的布局）
flex布局操作方便，布局简单，移动端应用广泛、PC端有一定的兼容问题，但是大部分PC端浏览器也是支持flex布局的
flex布局原理：
当我们给父级盒子知道了flex布局后，子元素里面的float、clear和vertical-align属性都将失效
采用flex布局的元素，称为flex容器（flex container）简称“容器”，它所有的子元素自动成为容器成员，叫做flex项目（flex item），简称“项目”

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