移动WEB开发流式布局

最新推荐文章于 2022-05-19 22:48:02 发布

闲人散客

最新推荐文章于 2022-05-19 22:48:02 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/czx1826488201/article/details/102840648

版权

1. 移动端基础

移动端主要处理webkit内核就行

2. 视口

视口：浏览器显示页面的屏幕区域。视口分为布局视口、视觉视口和理想视口。

2.1 布局视口layout viewport

在这里插入图片描述
2.2 视觉视口 visual viewport

用户能看到的网站区域，注意：是网站的区域；
通过缩放去操作视觉视口，不会影响布局视口，布局视口仍保持原来的宽度。
在这里插入图片描述
2.3 理想视口 ideal viewport

2.4 meta视口标签
下面这段代码每次进行前端编程时，系统自动生成。

<meta name="viewport/*窗口名称*/" content="width=device-width/*设备宽度*/, initial-scale=1.0/*初始缩放比*/， maximum-scale = 1.0/*最大缩放比*/， user-scalable = no/*用户是否可以缩放，yes 或 no*/">

3. 二倍图

3.1 物理像素&物理像素比

物理像素：分比率，就是屏幕可以存放多少元素
注意：PC端:1px = 1物理像素，但是移动端不尽相同；
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比
1px

二倍图出现的原因：假如一张图片是（50px 50px)像素，在一些设备中打开会按照一定的比例放大，这就导致图片肯定会模糊，为了解决这个问题，一开始就放一张设备放大后的的图片，然后再将大图片缩小至（50px 50px）。这时候图片在设备中打开就不会模糊了。

例子：
在这里插入图片描述

背景图片缩放background-size:图片宽度图片高度
如果只写一个参数，那么就是等比例缩放；
参数可以跟百分比，相对于父盒子来说的

**background-size：cover;//要完全覆盖父盒子，可能会有部分图片不全。**
**background-size：contai;//高度和高度等比例拉伸，当宽度或者高度铺满父盒子，就不再拉伸，可能会有空白区域。**

4. 移动端调试

4.1 移动端主流方案：

4.1.1 单独制作移动端页面（主流）

网址域名前加m(mobile)可以打开移动端，通过判断设备，如果是移动端设备打开，则跳到移动端页面。

4.1.2 响应式页面兼容PC移动端（其次）
制作麻烦；

5. 移动端技术解决方案

5.1 移动端浏览器
在这里插入图片描述

CSS3盒子模型box-sizing
使盒子变成CSS3盒子：box-sizing:border-box;
变成CSS3盒子之后不会再受padding 和border的影响。
在这里插入图片描述

6. 移动端常见布局

在这里插入图片描述
6.1.1 流式布局（百分比布局）
又称非固定像素布局；
相关代码：

section {
            width: 100%;
            max-width: 300px;
            /*最宽宽度*/
            max-height: 600px;
            /*最高高度*/
        }
        
        section div {
            width: 50%;
            height: 150px;
            float: left;
        }