黑马程序员技术交流社区

标题: 笔记 [打印本页]

作者: 风元 时间: 2019-4-11 09:01
标题: 笔记
1.0 移动端基础
移动端设备：手机、平板。
了解性内容：（红色为重点）
1、现在的浏览器现状分为pc端之前学的
移动端主要采用webkit内核可以大胆使用h5 + c3 只需考虑webkit兼容性问题
2、手机屏幕分辨率碎片化严重
3、调试方法：Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问
4、 Css像素和物理像素
a) 设备物理像素（device pixels）
设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了
b) css 像素
css像素又称逻辑像素或者虚拟像素，是一个相对长度单位，相对的是设备像素(device pixel)，览器内的一切长度都是以CSS像素为单位的。
【pc端】css像素与物理像素保持一致的，1个单位的CSS像素等于1个单位的物理像素。
c) 设备（物理）像素比
设备像素比，DPR(device pixels ratio)描述的是未缩放状态下，物理像素和CSS像素的初始比例关系。
设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如1:2代表1个css像素用2个设备像素来绘制。
5、视口布局视口视觉视口理想视口
6、 meta标签
<meta name="viewport"  content="width=device-width,
initial-scale=1.0, user-scalable=no,maximum-scale=1.0,
minimum-scale=1.0">
最标准的viewport设置
• 视口宽度和设备保持一致 content="width=device-width
• 视口的默认缩放比例1.0  initial-scale=1.0
• 不允许用户自行缩放  user-scalable=no
• 最大允许的缩放比例1.0 maximum-scale=1.0
• 最小允许的缩放比例1.0 minimum-scale=1.0
7、二倍图
a) 物理像素&物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，不可人为进行改变，其值大小决定了屏幕渲染图像的品质。这是设备在出厂时就设置好了,比如苹果6 是  750* 1334。
我们开发时候的1px 不是一定等于1个物理像素的
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放。
lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图，因为iPhone 6 的影响背景图片注意缩放问题。
8、背景缩放 background-size：宽  高；
单位：长度|百分比|cover|contain;
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
9、移动开发选择和技术解决方案
a) 单独制作移动端页面（主流）淘宝京东
b) 响应式开发页面兼容移动端（其次）三星
即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
10、技术解决方案
1.移动端浏览器兼容问题
移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
我们可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
2.移动端公共样式
移动端 CSS 初始化推荐使用 normalize.css/
Normalize.css：保护了有价值的默认值
Normalize.css：修复了浏览器的bug
Normalize.css：是模块化的
Normalize.css：拥有详细的文档
11、 css3盒子模型 box-sizing : border-box;
特点：传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
CSS3盒子模型：    盒子的宽度=  CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了
移动端可以全部CSS3 盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型
12、移动端特殊样式
a) /*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
  /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
重点：
1、移动端常见布局
移动端单独制作
• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局
响应式
• 媒体查询
• Bootstarp
1.1、流式布局
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
1.2、 Flex布局
Flex是Flexible Box的缩写，意为”【弹性布局】”，flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局，用来为盒状模型提供最大的灵活性。
   任何一个容器（标签）都可以指定为Flex布局。
【注意】当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
采用 Flex 布局的元素，称为  Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
1.2.1 父元素的常见属性
A）flex-direction设置主轴的方向
Flex-direction: row | row-reverse | column | column-reverse
分别设置主轴为x轴 x轴反方向 y轴 y轴反方向
在 flex 布局中，容器默认存在两根轴：主轴和侧轴，容器中的项目默认沿主轴排列。
主轴和侧轴就是两个方向，同样的叫法有：行和列、x 轴和y 轴。
【注意：】主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素（项目）是按照主轴来排列的。
// 设置水平轴为主轴（默认）水平向下
flex-direction: row;
// 设置垂直轴为主轴  水平向下
flex-direction: column;
B）justify-content 设置主轴上的子元素排列方式
定义子元素在主轴上的对齐方式要先确定主轴
Flex-start 从头部开始排列
Flex-eng 从尾部开始排序
Center  在主轴方向上居中对齐
Space-around 平分剩余空间
Space-between 先两边贴边在平分剩余空间（重要）
C）flex-wrap 设置是否换行（默认不换 nowrap）
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
换行 wrap
D）设置单行子元素在侧轴上的排列方式 algin-items
- 该属性是控制子项在侧轴（默认是y轴）上的排列方式  在子项为单项（单行）的时候使用
flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
stretch 拉伸
E）align-content  设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现【换行】的情况（多行），在单行下是没有效果的。
Flex-start 从头部开始排列
Flex-eng 从尾部开始排序
Center  在主轴方向上居中对齐
Space-around 平分剩余空间
Space-between 先两边贴边在平分剩余空间（重要）
stretch 拉伸设置子元素高度平分父元素高
F）flex-flow 属性是 flex-direction和flex-wrap 属性的复合属性
Flex-flow：row wrop；
G）align-content 和align-items区别
- align-items  适用于单行情况下，只有上对齐、下对齐、居中和拉伸
      align-content适应于换行（多行）的情况下（单行情况下无效），
            可以设置上对齐、下对齐、居中、拉伸
以及平均分配剩余空间等属性值。
总结就是单行找align-items  多行找 align-content
1.2.2 flex布局子项常见属性
- flex子项目占的份数
.item {
      flex: <number>; /* 默认值 0 */
}
- align-self控制子项自己在侧轴的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
span:nth-child(2) {
   /* 设置自己在侧轴上的排列方式 */
   align-self: flex-end;
}
- order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。
.item {
order: <number>;
}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2