移动前端开发/移动端web开发

最新推荐文章于 2024-05-06 19:42:56 发布

Supreme_lwl

最新推荐文章于 2024-05-06 19:42:56 发布

阅读量295

点赞数

分类专栏：前端移动Web开发

本文链接：https://blog.csdn.net/qq_42515626/article/details/104255703

版权

27 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

概念
- 视口：浏览器显示页面内容的屏幕区域。
- 分成3种：布局视口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）
meta视口标签实现理想视口

物理像素&物理像素比
- 移动端的物理像素与px并不是一一对应的关系，存在一个像素比，每款手机的像素比不一样。
- 视网膜屏幕技术把更多的像素点压缩至一个屏幕里，从而提高分辨率
移动端查看图片模糊的问题
- 移动端会导致图片变得模糊。当用到图片时，使用原图的两倍甚至更多倍，然后再用css技术把图片控制在想要的大小内，这样在移动端可以显示更清晰的图片。
背景缩放
- background-size

PC端对css3有兼容性问题,移动端没有,统一使用css3
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nrqoBy91-1581343178490)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200210205029483.png)]$

在这里插入图片描述

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基础
（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)">

关注

专栏目录