1.移动端和pc端区别在哪?
pc端:
- 屏幕比较大
- 需要网页固定版心且需要考虑更多的兼容性问题
移动端:
- 屏幕比较小 网页的宽度大多都是100% (为了适配当前主流手机屏幕)
- 移动端基本也不需要考虑兼容性问题 可放心使用c3特性
物理分辨率和逻辑分辨率的区别
前者是硬件设置的 基本无法修改 后者则是咱们开发中经常需要使用的 在软件方面即可修改
视口(简单说就是屏幕可以看见浏览器大小的窗口)
一共有三种分别是 布局视口:iOS, Android基本都将这个视口分辨率设置为980px。默认都是手机出厂自带的 视觉视口:字面意思就是眼睛可以看见屏幕上显示的区域 理想视口:让上面两个视口进行统一 让手机屏幕来显示咱们完整的浏览器网页 屏幕有多大 网页就有多大
视口标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这行代码基本是不需要记的 用vscode的话可以直接生成(只需明白其中作用就行)
- width=device-width:视口宽度=设备宽度
- initial-scale=1.0:初始页面缩放倍数
- maximum-scale=1.0 最大缩放倍数
- user-scalable=0 不允许用户缩放页面(移动端) 或者为 no 如果为 yes 则允许用户缩放
二倍图
其实实际开发中还有三倍图甚至四倍图等,多倍图,但是现在市场还是二倍图偏多,我们称为二倍图。 简单理解,二倍图存在就是为了让页面中图片更加清晰,遵循即可。
- 网页美工的设计稿基本是 750px
- 我们前端工程师拿到设计稿利用像素大厨选择 2X, 进行缩小一半,按照提示的单位开发即可。
百分比布局(流式布局)
这个属于比较简单的布局了 而且使用起来也相对麻烦不够灵活 后面的flex布局能完全取代 咱们了解了解即可
flex布局(弹性布局)
算是这篇的重点吧 flex布局不仅方便快捷 而且更简单、灵活.极大的加快咱们敲代码的速度
通过这张图可以很直观的看见flex布局的一些元素和组成部分 组成部分
- 弹性容器(添加display:flex; 只能给亲生的父盒子使用!!!)
- 弹性盒子(指父盒子中的每个子盒子)
- 主轴
- 侧轴(交叉轴)代码片段
主轴的对齐方式
属性值 | 具体作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
表上只有center和space-between是日后开发中使用的相对频繁的
justify-content: space-between;
效果显示两侧没间隙
justify-content: space-around; 每个子盒子相邻的间隙是两侧间隙的两倍 1:2
justify-content: space-evenly; 每个子盒子左右两侧间隙都一致
justify-content: center; 让所有子盒子一起水平居中 相邻之间没有间隙
侧轴(交叉轴)对齐方式
属性值 | 作用 |
---|---|
flex-start | 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
其中居中center是使用最多的 |
align-items: center; 个父盒子设置的属性
align-self:center; 这个是子盒子单独使用的属性 取值和align-items一致(使用频率较少)
伸缩比
用来把父盒子均分成若干等分 每个子盒子占其中的几等分 语法:flex:1;
取值:整数数字 没有单位
比如有一个父盒子里面有三个子盒子,每个子盒子写 flex:1; 此时每个子盒子各占三分之一。
.father {
display: flex;
height: 300px;
background-color: pink;
}
.father div {
/* 每个孩子各占1份 */
flex: 1;
/* 默认子盒子和父亲一样高 */
background: purple;
}
复制代码
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
复制代码
一定要给子盒子添加。
子盒子默认高度会和父盒子一样高。(前提是不给高度)
圣杯布局
所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分,这是最常见的,如京东手机版主页面顶部搜索
核心思路:
- 两侧盒子写固定大小
- 中间盒子 flex: 1; 占满剩余空间
总结
在flex眼中,标签不再分类。
- 简单说就是没有块级元素,行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示 Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动
当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex
caniuse.com/ 可以查看兼容性
作者:秋刀鱼不过期A
链接:https://juejin.cn/post/7122437194446274567/
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。