移动前端开发/移动端web开发
程序员文章站
2022-05-07 18:55:09
...
一、视口
-
概念
- 视口：浏览器显示页面内容的屏幕区域。
- 分成3种：布局视口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）
-
meta视口标签实现理想视口
二、二倍图
- 物理像素&物理像素比
- 移动端的物理像素与px并不是一一对应的关系，存在一个像素比，每款手机的像素比不一样。
- 视网膜屏幕技术把更多的像素点压缩至一个屏幕里，从而提高分辨率
- 移动端查看图片模糊的问题
- 移动端会导致图片变得模糊。当用到图片时，使用原图的两倍甚至更多倍，然后再用css技术把图片控制在想要的大小内，这样在移动端可以显示更清晰的图片。
- 背景缩放
- background-size
三、CSS3盒子模型
- PC端对css3有兼容性问题,移动端没有,统一使用css3
四、特殊样式
五、移动端常用布局
-
常用布局
- 流式布局 ( 百分比布局 )
- max-width 设置最大宽度
- min-width 设置最小宽度,当超过设置的宽度,则不会再伸缩
- flex布局
- less+rem+媒体查询布局
- 混合布局
- 流式布局 ( 百分比布局 )
-
移动端技术选型
六、flex布局
-
flex原理
- flex也叫伸缩布局 弹性布局等,用来为盒子提供最大的灵活性,任何容器都可以使用flex布局
- 当我们为父盒子设置flex布局以后,子元素的float clear 和 vertical-align属性将失效
- 采用flex布局的元素称为flex元素,子元素称为项目
- 原理 : 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
-
常见父项属性
(1) flex-direction 设置主轴的方向
-
主轴和侧轴
- 主轴 : x轴 , 水平向右
- 侧轴: y轴 , 垂直向下
-
属性值
(2) justify-content 设置主轴上的子元素排列方式
(3) flex-wrap 设置子元素是否换行- 默认是不换行的,如果显示不下,会自动修改子元素的宽度
- 属性值
(4) align-items 设置侧轴上子元素的排列方式 ( 子元素只有一行时才有效果 )
- 属性值
(5) align-content 设置侧轴上子元素的排列方式 ( 子元素有多行时才有效果 )
- 属性值
(6)
(7) flex-row 是 flex-diraction和flex-wrap属性的复合属性 -
-
常见子属性
（1）flex：分配子项目的剩余空间
（2）align-self：控制子项自己在侧轴上的排列方式
（3）order：定义项目的前后顺序，默认是0，如果设置为-1则会往前移动。
七、rem适配布局
- rem基础
（1）rem单位：是一个相对单位，跟em类似，em是父元素的字体大小。rem是相对于html的字体大小。
例如，em = 12px ，则10em = 120px 。
（2）rem优势：可以通过html标签里面设置的字体大小来控制整个页面的大小。 - 媒体查询
（1）语法规范：@media mediatype and|not|only (media feature){
css code;
}
（2）示例：@media screen and (max-width:800px){}
（3）引入资源：当样式比较多时，可以针对不同的媒体使用不同的css文件。原理就是在link中判断设备的尺寸，然后引用不同的css文件。示例:
<link rel = "stylesheet" href = "style320.css" media="screen and (min-width:320px)">
- less基础
（1）Less介绍：Less是css的扩展语言，也称为css预处理语言。他在css基础引入了变量、运算以及函数等功能。
（2）Less安装：cnpm install -g less
（3）查看Less版本：lessc -v
（4）Less使用： 1. 变量：@变量名：属性值。示例：@color:pink; 定义好之后，后面的属性都可以使用这个变量。
（5）Less编译：VScode安装插件：easy less，安装这个插件之后，只要在less文件中保存就可以生成css文件。
（6）Less嵌套：在css的花括号里面可以继续添加花括号来定义子元素的样式。如果要嵌套伪类，则可以在伪类的选择器前面加一个&符号，否则会默认定义成父选择器的儿子。
（7）Less运算：可以对数字进行四则运算。运算符前后要空格。如果运算符左右两个参数只有一遍有单位，则以那个单位为准；如果两边都有参数，则以第一个单位为准。 - rem适配方案