电商移动Web实战项目（5）

article/2025/9/29 2:08:18

响应式

什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表，电视） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

  • 在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。

  • 通常的做法是针对移动端单独做一套特定的版本。

  • 如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）

  • 响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

*缺点： *

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 

响应式开发现状：

  • 如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）

  • 在新建站点 上采用响应式开发的越来越多。

  • 在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。

响应式开发与移动web开发的比较

开发方式移动web开发+pc开发响应式开发
引用场景一般已经有了PC端网站，只需要端独开发移动端网站即可针对一些新建网站，并且要求适配移动端
开发针对性强，开发效率高兼容各种终端，效率低
适配只能适配移动端或者PC端，pad上体验比较差可以适配各种终端
效率代码简洁，加载快代码相对复杂，加载慢

 

 

 

//思考：响应式开发的原理是什么？

媒体查询

媒体查询（Media Query）是CSS提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

 

设备分类

分类宽度范围
大屏设备>1200px
中屏设备992px~1200px
小屏设备768px~992px
超小屏设备< 768px

媒体查询的使用

需求：

<!--
需求：    
大屏设备(>1200px)   版心：1170px   背景色：红色  中屏设备(992-1200)  版心：970px    背景色：蓝色小屏设备(768-992)   版心：750px    背景色：黄色 超小屏设备(<768px)  版心：100%     背景色：绿色
-->

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

 

媒体查询语法：

/*查询屏幕*/
@media screen and 条件 {
}/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {.container {width: 1170px;background-color: red;}
}@media screen and (min-width: 992px) and (max-width: 1200px) {.container {width: 970px;background-color: blue;}
}@media screen and (min-width: 768px) and (max-width: 992px) {.container {width: 750px;background-color: yellow;}
}@media screen and (max-width: 768px) {.container {width: 100%;background-color: green;}
}

弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。

bootstrap框架

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

  • 组件简洁大方、代码规范精简、界面自定义性强。

  • Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

  • Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

  • 有自己的生态圈，不断的更新迭代

  • 提供了一套简洁、直观、强悍的组件

  • 标准化的HTML+CSS编码规范

  • 让开发更简单，提高了开发效率。

  • 扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。

版本：

  • 2.x.x 停止维护

    • 优点：兼容性好

    • 缺点：代码不够简洁、功能不够完善

  • 3.x.x 目前使用最多

    • 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目

    • 缺点：放弃了IE67，对IE8支持但是界面效果不友好

  • 4.x.x 测试阶段

基本模板

目录结构说明

<!DOCTYPE html>
<!--使用HTML5文档，使用中文简体-->
<html lang="zh-CN">
<head><!--meta1. 使用utf-8编码--><meta charset="utf-8"><!--meta2. 当前页面在在IE浏览器访问时，使用最新的ie浏览器内核进行渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--meta3. 视口设置--><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都必须跟随其后！ --><title>bootstrap基本模板</title>
<!--引入bootstrap的核心样式文件--><link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- html5shiv是用来解决IE8以下浏览器不支持HTML5语义化标签的问题 --><!--respond是用来解决IE8以下浏览器不支持媒体查询的问题，注意：respond不支持file协议打开--><!--条件注释：IE浏览器专属--><!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<h1>你好，世界！</h1><!--bootstrap依赖与jquery，因此需要在bootstrap之前引入jquery文件-->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<!--引入bootstrap的核心js文件-->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

全局样式

normalize.css

Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

官网

github网址

normalize的特点：

  • 保护有用的浏览器默认样式而不是完全去掉它们

  • 一般化的样式：为大部分HTML元素提供

  • 修复浏览器自身的bug并保证各浏览器的一致性

  • 优化CSS可用性：用一些小技巧

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值。

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">...
</div>

格系统，也叫网格系统

  • .row用于抵消.container容器的15px的padding值

  • 可以在.row中嵌套column

栅格系统常用类（总共12列）

类名例子解释
.col-xs-xx.col-xs-6在超小屏幕（及以上）生效
.col-sm-xx.col-sm-6在小屏幕（及以上）生效
.col-md-xx.col-md-6在中屏幕（及以上）生效
.col-lg-xx.col-lg-3在大屏幕及生效，占1/4
.col-lg-xx.col-lg-4在大屏幕及生效，占1/3
.col-lg-xx.col-lg-6在大屏幕及生效，占1/2

【案例：响应式栅格系统】

<!--
需求：1. 在大屏时显示6个等分的列2. 在中屏时显示4个等分的列3. 在小屏时显示3个等分的列4. 在超小屏时显示2个等分的列
-->

【案例：列嵌套.html】

<div class="col-lg-4"><!--栅格系统无处不在，只要父盒子有宽度，就可以使用栅格系统--><div class="row"><div class="col-lg-6"></div><div class="col-lg-6"></div></div></div>

【案例：列偏移.html】

<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="row"><div class="col-lg-3"></div><!--col-lg-offset-3:在大屏下，这个div将向右侧偏移3个单位--><div class="col-lg-6 col-lg-offset-3"></div>
</div>

响应式工具

//1. 大屏显示
//2. 中屏不显示
//3. 小屏显示
//4. 超小屏不显示

推荐使用hidden相关的属性

 

其他

bootstrap内置的东西是在太多，不可能每一个都详细的讲，但是bootstrap文档简洁明了，当我们用到了相关的东西的时候，再来详细的进行讲解。

 

微金所

目录结构

  • wjs.............项目文件夹

    • js...................js文件目录

    • lib..................第三方框架目录

    • images...............图片文件目录

    • css..................css文件目录

    • fonts..............字体图标目录

    • favicon.ico..........网站图标

    • index.html...........站点入口

<link rel="icon" href="favicon.ico" type="image/x-icon" />

页面结构

<!--头部开始-->
<div class="wjs_header"></div>
<!--头部结束--><!--导航开始-->
<div class="wjs_nav"></div>
<!--导航结束--><!--轮播图开始-->
<div class="wjs_banner"></div>
<!--轮播图结束--><!--信息开始-->
<div class="wjs_info"></div>
<!--信息结束--><!--产品开始-->
<div class="wjs_product"></div>
<!--产品结束--><!--新闻开始-->
<div class="wjs_news"></div>
<!--新闻结束--><!--合作伙伴开始-->
<div class="wjs_partner"></div>
<!--合作伙伴结束-->

向css文件中引入图标字体模板：

@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url('iconfont.ttf') format('truetype'),url('iconfont.svg#iconfont') format('svg');
}

 

 


http://chatgpt.dhexx.cn/article/SKLsKTCK.shtml

相关文章

响应式开发

响应式开发

一、网页布局方式响应式开发 1、固定宽度布局&#xff1a;为网页设置一个固定的宽度&#xff0c;通常以px做为长度单位&#xff0c;常见于PC端网页。 2、流式布局&#xff1a;为网页设置一个相对的宽度&#xff0c;通常以百分比做为长度单位。 3、栅格化布局&#xff1a;将网页…
阅读更多...
css进阶

css进阶

1 选择器的进阶 1.1 后代选择器 根据HTML的嵌套关系&#xff0c;选择父元素后代中满足条件的元素 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"…
阅读更多...
linux 升级php 5.3,Linux PHP5.3升级PHP5.5.33 (CentOS)

linux 升级php 5.3,Linux PHP5.3升级PHP5.5.33 (CentOS)

由于要使用了laravel5.1&#xff0c;php要升级到5.5以上。具体环境是Aliyun Cent OS 7.0。由于阿里的yum源lastest只有5.4&#xff0c;laravel5.1必须php5.5&#xff0c;加了几个网上的yum源&#xff0c;各种各样的问题&#xff0c;所以只能麻烦的编译安装了。 首先网上这类的文…
阅读更多...
BAT三巨头之云产品角逐

BAT三巨头之云产品角逐

前言 BAT是中国互联网公司百度公司(Baidu)、阿里巴巴集团(Alibaba)、腾讯公司(Tencent)三大巨头首字母缩写。早期BAT三巨头都有各自的产品定位和势力范围而且是各自领域的老大&#xff0c;百度提供LBS基于位置&#xff08;map&#xff09;和探索(探索引擎)的服务&#xff0c;阿…
阅读更多...
北大软微学院计算机金融方向考研,北大软微金服方向2016年考研经验贴---初试410分...

北大软微学院计算机金融方向考研,北大软微金服方向2016年考研经验贴---初试410分...

2016-3-29 08:50:55 上传 2016考研经验贴 ---北京大学软件与微电子学院金融信息服务方向 请大家重点看贾晓鸣学长的经验帖和刘洋学长的导学视频&#xff0c;我定位这篇经验贴是我的一些心得补充&#xff01;我先介绍自己的情况&#xff0c;我今年的初试总分是410&#xff0c;专…
阅读更多...
BootStrap---day02、03微金所项目

BootStrap---day02、03微金所项目

BootStrap---day02、03微金所项目 前两天没有更新&#xff0c;主要是因为做项目做得没有心情来写博客了&#xff08;真的很菜&#xff09;&#xff0c;今天的任务都做完了&#xff0c;就来写一写这几天使用BootStrap写项目的总结和心得。 一、实现功能 1、模态框 2、响应式…
阅读更多...
个人练习小览---《微金所仿站》

个人练习小览---《微金所仿站》

这个2016年12月份的联系，主要使用了bootstrap来进行练习，熟悉bootstrap怎么操作。 这个网站未完成全部，主要就是熟悉bootstrap的模块操作。 index.html <!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="utf-8">&…
阅读更多...
案例——微金所页面

案例——微金所页面

1.效果图 2.整体页面结构块 <!--顶部通栏--> <header class"wjs_header"></header> <!--导航--> <nav class"wjs_nav"></nav> <!--banner轮播图--> <div class"wjs_banner"></div> <…
阅读更多...
干货|软件测试简历的编写以及注意事项

干货|软件测试简历的编写以及注意事项

小编热衷于收集整理资源&#xff0c;记录踩坑到爬坑的过程。希望能把自己所学&#xff0c;实际工作中使用的技术、学习方法、心得及踩过的一些坑&#xff0c;记录下来。也希望想做软件测试的你一样&#xff0c;通过我的分享可以少走一些弯路&#xff0c;可以形成一套自己的方法…
阅读更多...
软件测试简历，这一点你是否漏掉

软件测试简历，这一点你是否漏掉

几乎所有的测试简历都在长篇大论谈如何做测试&#xff0c;参加过多少项目的测试&#xff0c;测试过程是怎么样的&#xff0c;测试如何管理&#xff0c;会黑盒、白盒、灰盒、彩盒.....、会写方案、测试用例。从这些内容中我无法看出你会什么&#xff0c;技术上哪些是你的强项&am…
阅读更多...
前端开发_开发软件Hbuilder简介

前端开发_开发软件Hbuilder简介

一、Hbuilder简介 (1):软件简介 HBuilder是DCloud&#xff08;数字天堂&#xff09;推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写&#xff0c; 它基于Eclipse&#xff0c;所以顺其自然地兼…
阅读更多...
程序员，你的简历应该这样弄

程序员，你的简历应该这样弄

原文地址&#xff1a;http://www.devstore.cn/essay/essayInfo/5557.html 这个可以帮助一些比较纠结的人改善下简历。 特别说明&#xff1a; - 本文写于2015年11月&#xff0c;当时我在找工作&#xff0c;据此优化简历&#xff0c;每投必中。当时我还写了求职相关的其它文章&a…
阅读更多...
Docker部署程序员简历

Docker部署程序员简历

特色&#xff1a; 1.轻量&#xff0c;无需数据库。 2.支持密码验证访问&#xff0c;避免完全公开简历。 3.直接使用 Markdown 编写简历&#xff0c;实时解析页面。 4.简历所有图标、文字、排版均在 Markdown 中设置&#xff0c;无需修改代码。 5.支持 Docker 一键部署&#xff…
阅读更多...
软件测试和软件开发之间的关系及模型

软件测试和软件开发之间的关系及模型

目录 前言 瀑布模型 V模型 W模型&#xff1a; H模型 结语 前言 软件测试和软件开发一样&#xff0c;都遵循软件工程原理&#xff0c;遵循管理学原理&#xff0c;测试专家通过实践总结出了很好很多的测试模型&#xff0c;这些模型将测试活动进行了抽象&#xff0c;明确了…
阅读更多...
软件测试VS软件开发哪个好？怎么选择

软件测试VS软件开发哪个好？怎么选择

在IT行业&#xff0c;我经常会看到很多人纠结是做软件开发还是软件测试&#xff0c;其实这个问题是没有很标准的答案的。所谓&#xff1a;三百六十行&#xff0c;行行出状元&#xff01;没有最好的工作&#xff0c;只有适合自己的工作&#xff0c;选择适合自己的岗位才是最重要…
阅读更多...
如何介绍简历中的项目呢？请看软件测试老师的分享

如何介绍简历中的项目呢？请看软件测试老师的分享

项目经验与工作经验是相辅相成的&#xff0c;但较之于工作经验&#xff0c;项目经验更侧重于表现求职者在某个专业领域内的技能水平&#xff08;技能水平决定了工资水平&#xff09;。因而&#xff0c;技术类岗招聘的时候&#xff0c;更注重项目经验。项目介绍是有套路的&#…
阅读更多...
软件测试简历模板【功能测试，自动化测试，测试开发】简历模板

软件测试简历模板【功能测试，自动化测试，测试开发】简历模板

前言&#xff1a; 软件测试是软件开发过程中至关重要的一环&#xff0c;它可以保证软件质量、提高用户体验、增强产品竞争力。因此&#xff0c;在软件测试领域从事职业发展的人员需要具备扎实的基础知识、丰富的实践经验和优秀的沟通能力。而在求职过程中&#xff0c;一份清晰…
阅读更多...
第1讲 几种密码技术的简要介绍——《图解密码技术》

第1讲 几种密码技术的简要介绍——《图解密码技术》

最近上密码学的课&#xff0c;听不懂老师上课讲的内容&#xff0c;也不理解密码学到现在学的是个什么东西&#xff0c;所以就自己找资料开始啃&#xff0c;我会将我自己学到的加上自己的理解做个记录&#xff0c;以便于复习。本人才疏学浅&#xff0c;如果有理解不对的地方&…
阅读更多...
程序员睡前发「73 76 79 86 85」，女孩熬夜破解发现竟是表白密码！

程序员睡前发「73 76 79 86 85」，女孩熬夜破解发现竟是表白密码！

在大家心目中程序员形象可能会是很呆、较木讷、不擅言词、不懂如何讨女生欢心。其实不然&#xff0c;程序员也有浪漫一面呢&#xff0c;现在有位程序员和妹子聊天时&#xff0c;选择用代码表达爱意&#xff0c;一句费解的「73 76 79 86 85」&#xff0c;让人看见不同的趣味与浪…
阅读更多...
密码密钥硬编码检查

密码密钥硬编码检查

摘要&#xff1a;本文重点讲述通过静态检查工具有效的防止密码密钥的泄露。 本文分享自华为云社区《密码密钥硬编码检查》&#xff0c;作者&#xff1a; Uncle_Tom。 Verizon《2022数据泄露调查报告&#xff08;DBIR&#xff09;》指出&#xff0c;61%的数据泄露涉及凭证数据&…
阅读更多...
推荐文章

Copyright @ 2022~2023