1. 移动端:
移动端和pc端的区别:
(1). pc端屏幕较大 且网站一般都版心设计
(2). 移动端: 屏幕小 且出现比较晚 基本都是用-webkit的内核 兼容性较好
早期移动端和pc端是同一套代码 所以移动端的分辨率一般设置为980px
单独制作 根据不同的设备显示不同 通常情况下:网址域名前面加m(mobile)可以打开移动端 通过判断设备,如果是移动设备打开,则跳转到移动端页面 也就是说 除了pc端的页面外 还要再单独制作一份 移动端的页面
响应式开发 根据屏幕的变化 实时改变页面的宽度 兼容性是个大问题
制作麻烦 需要花费大量精力去调兼容性问题
https://material.io/devices/ 屏幕尺寸网站
-
1.1 屏幕尺寸：
-1.2 分辨率 单位是 px
分辨率是指屏幕上像素点的个数
物理分辨率/设备分辨率：
当前屏幕的分辨率 是不能改变的 一般出厂就设置好了逻辑分辨率： 指的是设备宽度和高度 单位为像素 是由软件驱动的
设计图会根据逻辑分辨率设计页面 是可以根据设备大小变化的ppi 单位屏幕内像素点的个数
ppi越高 像素点越多 图像越清晰
1.2 视口：
- 目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
viewport: 视口:
width=device-width 视口宽度=设备宽度
initial-scale=1.0 缩放1倍 (不缩放) 表示现在写多少像素，在页面之中就展示多少像素，不缩放
minimum-scale=1,maximum-scale=1,user-scalable=0 ---- 禁止用户缩放页面，防止页面布局被打乱
- 视口分为: 布局视口件、视觉视口、理想视口
- 布局视口 layout viewport:
一般手机浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 - 视觉视口 visual viewport :
用户正在看到的网站的区域 n 理想视口 ideal - 理想视口 viewport: 对设备来讲，是最理想的视口 尺寸 n meta视口标签的
- 主要目的：布局视口的宽度应该与理想视口的宽度 一致，简单理解就是设备有多宽，我们布局的视口就多宽
1.3 二倍图
开发环境不同 图片显示分辨率不同
物理像素&物理像素比
分辨率---->物理像素
1366X768 在pc端设置的像素点 在移动端的页面 像素点的数量不同
图片显示就是会出现模糊的情况
pc端的1px----移动端 不一定就是1px
在iphone8里 物理像素比就1：2 的关系
就是pc端的1个px 占据手机的两个像素 2px
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素 比
早期使1css像素=1物理像素 但是手机上看图片就不是很清楚
Retina(视网膜屏幕) 是一种显示技术 可以将更多的物理像素点压缩到一个屏幕里,
这样这块小屏幕就可以显示更多的像素 从而使图片的更加细腻 清晰
物理像素越多-分辨率就越大 那么看图片就更加清楚
这样图片就会出现问题 像素
6 图片的解决办法 放置一个css像素是实际大小两倍/n倍关系的图片 来修复像素问题
先强制缩小 ,然后通过手机屏幕自动放大
1.4 移动端特殊样式:
1 高亮清除: 将高亮设置为透明色
a标签:-webkit-tap-highlight-color:transparent
2 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-appearance:none
3 禁止长按页面弹出菜单
img,a{
-webkit-touch-callout:none;
}
1.5 chrome调试工具:
2. 百分比布局：
- 移动端常见布局： 流式布局（即百分比布局），flex布局，less+rem+媒体查询布局，混合布局，响应式布局（bs）
- 百分比布局: 高度固定 子元素宽度不设定具体值 根据百分比分配宽度 根据设备宽度变化 盒子大小随之变化
需要给屏幕设置最大最小宽度
max-width:
min-width;
3. Flex布局/弹性布局
3.1 特点:
使网页布局布局更加灵活 简单
避免浮动脱标的问题
组成: 弹性容器: 父元素display:flex;
弹性盒子: 设置了df的最近一级亲儿子
主轴 对齐方式: jusitfy-content
侧轴 对齐方式: align-items
<style>
.box{
display: flex;
}
</style>
<div class="box">
<div></div>
<div></div>
<div></div>
<span></span><span></span><span></span>
</div>
3.2 主轴对齐方式 justify-content:
.box {
/* 弹性容器 */
display: flex;
/* 主轴对齐方式 */
/* 从起点位置开始排列 */
justify-content: flex-start;
/* 从终点位置开始排列 */
justify-content: flex-end;
/* 居中对齐 */
justify-content: center;
/* 两端贴近容器 盒子之间间距均分 */
justify-content: space-between;
/* 空间均匀的分配在盒子两侧 所以首尾盒子与容器之间的距离 是盒子之间的距离的一半 */
justify-content: space-around;
/* 空间均匀的分配在每个盒子之间 */
justify-content: space-evenly;
}
<div class="box">
<div></div>
<div></div>
<div></div>
<span></span><span></span><span></span>
</div>
3.3 侧轴对齐方式: align-items:; align-self
align-items : 弹性容器控制盒子的对齐方式
align-self: 弹性盒子自己控制对齐方式
.box {
display: flex;
justify-content: flex-start;
/* 侧轴对齐方式 */
/* 从起点位置开始排列 */
align-items: flex-start;
/* 从终点位置开始排列 */
align-items: flex-end;
/* 居中对齐 */
align-items: center;
/* 默认拉伸为容器的高度 */
align-items: stretch;
}
div{
align-self:flex-start;
}
3.4 flex布局的特点:
- 1: 设置了display:flex的都是弹性布局
- 2 : 弹性容器的宽度默认与父级一样 高度由内容撑开
- 3: 弹性盒子的宽度由内容撑开 高度默认与父级一样
align-items :侧轴默认对齐方式是stretch; 宽度 - 4 flex布局没有显示模式的区别 标签都可以设置宽高 一行排列多个
- 5 弹性盒子默认是不会换行的 当盒子内容过多 压缩盒子的跨度一行显示
3.5 伸缩比
伸缩比:flex:值; 分配剩余空间
伸缩比:flex 给弹性盒子添加
1.所有的弹性盒子都添加相同的flex值,均分弹性容器的宽度;如果flex值不同,根据比例进行分配
2.其他的盒子宽度固定,只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度
3.6 设置主轴方向 flex-direction:
- 1 row: 行 从左到右 -----默认主轴方式
- 2 column:列 从上到下
- 3 row-reverse :行 从右到左
- 4 column-reverse: 列 从下到上
3.7 弹性盒子换行 flex-wrap:
- nowrap: 默认值 不换行
- wrap:换行
3.8 多行侧轴排列方式align-content:
- 弹性盒子换行 侧轴方向上的盒子要均分容器的剩余空间
1.盒子有高度 盒子+间距==均分空间
2.盒子没有高度 高度=均分高度 -
语法: 与jc的取值一致
默认多行侧轴排列
垂直水平居中
弹性布局垂直水平居中
.box {
/* 垂直水平居中 */
display: flex;
/* 主轴水平居中对齐 */
justify-content: center;
/* 侧轴垂直居中 */
align-items: center;
width: 400px;
height: 400px;
background: #6cf;
}
.son {
width: 120px;
height: 120px;
background-color: #0a0;
}
定位垂直水平居中
.box {
/*定位居中 ：可以*/
/* position: relative; */
width: 400px;
height: 400px;
background: #6cf;
}
.son {
position: absolute;
top: 50%;
left: 50%;
/* tf转换可以 */
transform: translate(-50%, -50%);
/* 浮动没有效果 不能弹性布局不能使用flex
float: right;*/
width: 120px;
height: 120px;
background-color: #0a0;
}
** 弹性布局下 float属性无效 定位和转换可以**
