移动端响应式布局项目之阿里百秀首页

文章目录

移动端响应式布局项目之阿里百秀首页
前言
一、前期准备
- 1.1 建立文件夹
- 1.2 需求分析
- - 1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份`
  - - 设计图尺寸为1280px
  - 1.2.2 屏幕划分分析 `通过缩小屏幕发现哪个尺寸的设备会发生布局改变，这部分设计师会给的`
  - - 一般策略 `先布局大屏的pc端布局，最后根据实际需求通过媒体查询修改小屏幕和超小屏幕的移动端布局样式`
- 1.3 创建html骨架结构`直接拿来使用`
- 1.4 引入相关样式文件
- 2.4 书写内容
- - 2.4.1 直接拿Bootstrap 预先定义好的样式来使用
  - 2.4.2 `按照需求修改Bootstrap 原来的样式`，注意权重问题
二、技术点
- 2.1 `container 宽度修改`
- - 2.1.1 如果设计图尺寸和bootstrap的设备尺寸有出入,则将设计图尺寸所在的区间修改为设计图尺寸
- 2.2 `部分元素的宽高用流式布局或者其他布局`效果更佳，`其他属性和pc端写法一样`
- 2.3 `通过媒体查询修改屏幕缩放后的样式`
总结

前言

主要使用响应式布局,流式为辅

一、前期准备

1.1 建立文件夹

1.2 需求分析

1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份`

设计图尺寸为1280px

1.2.2 屏幕划分分析 `通过缩小屏幕发现哪个尺寸的设备会发生布局改变，这部分设计师会给的`

一般策略 `先布局大屏的pc端布局，最后根据实际需求通过媒体查询修改小屏幕和超小屏幕的移动端布局样式`

1.3 创建html骨架结构`直接拿来使用`

<!DOCTYPE html>
<html lang="zh-CN"><head><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, maximum-scale=1, user-scalable=no"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>...</title><!-- Bootstrap,两种方法其中一种 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> --><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><!--解决ie9以下浏览器对 css3 Media Query 的不识别 --><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body>
</html>

1.4 引入相关样式文件

     <!-- Bootstrap,两种方法其中一种 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->

2.4 书写内容

2.4.1 直接拿Bootstrap 预先定义好的样式来使用

2.4.2 `按照需求修改Bootstrap 原来的样式`，注意权重问题

二、技术点

2.1 `container 宽度修改`

2.1.1 如果设计图尺寸和bootstrap的设备尺寸有出入,则将设计图尺寸所在的区间修改为设计图尺寸

 /* 利用媒体查询修改 container宽度适合效果图宽度 */@media screen and (min-width: 1280px) {.container {width: 1280px;}}

2.2 `部分元素的宽高用流式布局或者其他布局`效果更佳，`其他属性和pc端写法一样`

2.3 `通过媒体查询修改屏幕缩放后的样式`

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

移动端响应式布局项目之阿里百秀首页相关推荐

使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
前端移动Web第四天案例：阿里百秀首页-响应式布局（bootstrap框架）
阿里百秀首页案例技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现中 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
移动端响应式布局通用代码
移动端响应式布局通用代码 @charset "utf-8"; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form, ...
阿里百秀首页案例（Bootstrap框架）
一.阿里百秀首页案例技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸案例:需求分析 1. 页面布局分析 2. 屏幕划分分析 ...
移动WEB开发之响应式布局--阿里百秀首页案例
案例:阿里百秀移动端首页技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计案例:需求分析 1. 页面布局分析 2. 屏幕划分分析 ...
uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】
实现目标:uniapp一套式制作pc端.pad端.手机端.符合国家等保二级标准. 目录技术分析 pc端(pad端)与移动端的开发区别 1. 用户操作习惯. 2. 界面区别. 3. 表格区别 4. 技 ...
在html中写响应式布局的代码,手机端自适应响应式框架，移动端响应式布局代码...
移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体 ...
手机端自适应响应式框架，移动端响应式布局代码
开拓眼界的方式有两种,一是读书,二是花钱.读书,花最少的钱买别人的财富,你把孙子兵法背下来,孙子便跟你一辈子.花钱,行万里路,阅人无数,毕竟对于人生来说,任何经验都是有用的. 那,既然没有钱,就好好读 ...

移动端响应式布局项目之阿里百秀首页

移动端响应式布局项目之阿里百秀首页

文章目录

前言

一、前期准备

1.1 建立文件夹

1.2 需求分析

1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份`

设计图尺寸为1280px

1.2.2 屏幕划分分析 `通过缩小屏幕发现哪个尺寸的设备会发生布局改变，这部分设计师会给的`

一般策略 `先布局大屏的pc端布局，最后根据实际需求通过媒体查询修改小屏幕和超小屏幕的移动端布局样式`

1.3 创建html骨架结构`直接拿来使用`

1.4 引入相关样式文件

2.4 书写内容

2.4.1 直接拿Bootstrap 预先定义好的样式来使用

2.4.2 `按照需求修改Bootstrap 原来的样式`，注意权重问题

二、技术点

2.1 `container 宽度修改`

2.1.1 如果设计图尺寸和bootstrap的设备尺寸有出入,则将设计图尺寸所在的区间修改为设计图尺寸

2.2 `部分元素的宽高用流式布局或者其他布局`效果更佳，`其他属性和pc端写法一样`

2.3 `通过媒体查询修改屏幕缩放后的样式`

总结

移动端响应式布局项目之阿里百秀首页相关推荐

最新文章

热门文章

移动端响应式布局项目之阿里百秀首页

移动端响应式布局项目之阿里百秀首页

文章目录

前言

一、前期准备

1.1 建立文件夹

1.2 需求分析

1.2.1 页面布局分析 判断每一部分占据栅格系统多少份

设计图尺寸为1280px

1.2.2 屏幕划分分析 通过缩小屏幕发现哪个尺寸的设备会发生布局改变，这部分设计师会给的

一般策略 先布局大屏的pc端布局，最后根据实际需求通过媒体查询修改小屏幕和超小屏幕的移动端布局样式

1.3 创建html骨架结构直接拿来使用

1.4 引入相关样式文件

2.4 书写内容

2.4.1 直接拿Bootstrap 预先定义好的样式来使用

2.4.2 按照需求修改Bootstrap 原来的样式，注意权重问题

二、技术点

2.1 container 宽度修改

2.1.1 如果设计图尺寸和bootstrap的设备尺寸有出入,则将设计图尺寸所在的区间修改为设计图尺寸

2.2 部分元素的宽高用流式布局或者其他布局效果更佳，其他属性和pc端写法一样

2.3 通过媒体查询修改屏幕缩放后的样式

总结

移动端响应式布局项目之阿里百秀首页相关推荐

最新文章

热门文章

1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份`

1.2.2 屏幕划分分析 `通过缩小屏幕发现哪个尺寸的设备会发生布局改变，这部分设计师会给的`

一般策略 `先布局大屏的pc端布局，最后根据实际需求通过媒体查询修改小屏幕和超小屏幕的移动端布局样式`

1.3 创建html骨架结构`直接拿来使用`

2.4.2 `按照需求修改Bootstrap 原来的样式`，注意权重问题

2.1 `container 宽度修改`

2.2 `部分元素的宽高用流式布局或者其他布局`效果更佳，`其他属性和pc端写法一样`

2.3 `通过媒体查询修改屏幕缩放后的样式`