移动WEB开发之流式布局

发布时间：2022-08-19 11:40

web前端基础知识资料包

百度网盘

提取码：f1vz

学习目录

移动端最终需要完成一个京东页面

浏览器基础

手机屏幕现状

移动端调试方法

总结

视口

布局视口

视觉视口

理想视口

总结

meta视口标签

标准的viewport设置

最完美的写法

 <meta name="viewport" content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

物理像素与物理像素比

二倍图

图片里面的像素太丰富了，文字一般是不会受到什么影响的

多倍图

背景缩放 background-size

二倍图以及多倍图切图

可以使用cutterman来进行切图操作

移动端开发选择

单独移动端页面

响应式兼容PC端口制作

总结

移动端技术解决方案

移动端浏览器

CSS初始化

CSS初始化官网地址

CSS3盒子模型 box-sizing

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 传统盒子模型 = width + border + padding */
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #ccc;
        }

        div:nth-child(2) {
            /* 
                box-sizing: border-box;
                有了这句话，就让盒子变成CSS3盒子模型
                padding和border不会再撑大盒子
            */
            margin-top: 10px;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 10px solid #ccc;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

实现效果图

移动端特殊样式

可以直接复制到初始化当中去即可

移动端技术选型

移动端技术选型分为很多种，具体使用哪一种可以根据自己进了哪一家公司，公司是如何选择的即可

流式布局（百分比布局）

流式布局主要看的是宽度
可以设置最大宽度，但是里面的孩子可以自动收缩

京东移动端首页案例准备

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
    user-scalable=no, maximum-scale=1.0, minium-scale=1.0">

最好给一个最大的宽度和一个最小的宽度 - 通过最大宽度和最小宽度来控制对页面的缩放操作

使用百分比来进行布局操作即可

二倍精灵图的做法

在firework中千万不要保存图片

图片格式

移动WEB开发之flex布局显示导读

目标

最后进行一个移动端页面的制作即可

子目录

flex布局体验

传统布局与flex布局

初体验(案例)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

实现的效果图

里面的内容随着浏览器页面的移动而自适应