源码

............................比较麻烦

技术选型

方案：我们采取响应式页面开发方案

技术：bootstrap框架

设计图：本设计图采用 1280px 设计尺寸

需求分析

1. 页面布局分析

2. 屏幕划分分析

① 屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为 col-md- 就可以了， md 是大于等于 970 以上的

② 屏幕缩放发现小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局

③ 屏幕缩放发现超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局

④ 策略：我们先布局 md以上的 pc端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊布局样式

页面制作

Bootstrap 使用四步曲： 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容

    <meta charset="UTF-8">
    <!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <!--[if lt IE 9]>
    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://fastly.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif] -->

引入bootstrap样式文件

    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

引入自己的CSS文件

页面制作注意点

container 宽度修改

因为本效果图采取 1280的宽度，而Bootstrap 里面 container宽度最大为 1170px，因此我们需要手动改下container宽度

@media screen and (min-width:1280px) {
    .container {
        width: 1280px;
    }
}

添加字体图标

相当于给a添加了一个before伪元素
.nav ul li a::before {
    vertical-align: middle;
    padding-right: 5px;
}

这里如果加margin值会掉下来，所以给每个p加上padding值

另外记得给.news清除浮动，直接在类名后面加上clearfix就行，bootstrap里面已经设置好了

我们如果进入了我们的超小屏幕

logo里面的图片就隐藏起来，里面变成文字

然后事先准备好一个盒子里面装着文字，平时隐藏起来，只有在超小屏幕下显示

当我们进入小屏幕和超小屏幕的时候，我们nav里面的li浮动起来，并且宽度为16.6%。

利用媒体查询

当我们进入小屏幕和超小屏幕的时候，里面的文字会变小14px

当我们处于超小屏幕时，第一个li宽度为100%，剩下的各占50%

超小屏幕下，记得发布模块的img隐藏

源码

移动开发之响应式开发----阿里百秀首页案例-Webpack文档类资源-CSDN文库

https://download.csdn.net/download/muziqwyk/85385794

移动开发之响应式开发----阿里百秀首页案例

技术选型

需求分析

页面制作

页面制作注意点

源码

猜你喜欢