响应式开发原理

╰+哭是因爲堅強的太久メ 2022-05-22 05:56 287阅读 0赞

### 什么是响应式网站？ ###

就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计

响应式网站的概念：

*  flexible   grid   layout    弹性网格布局
 *  flexible   image    弹性图片
 *  media queries   媒体查询

响应式网站的优点：

*  减少工作量

1.   网站、设计、代码、内容都 只需要一份
2.  多出来的工作量只是JS脚本、CSS样式做一些改变

*     节省时间
 *  每个设备都能得到正确的设计
 *  搜索优化

响应式网站的缺点：

*  会加载更多的样式和脚本资源
 *  设计比较难精确定位和控制
 *  老版本浏览器兼容不好

媒体查询：

@media all and (min-width:800px) and (orientation:landscape){
    ...
    }

and-----与-------全部匹配

or-------或-------任意条件匹配

not------非

CSS3媒体查询属性简介：

*  width:视口宽度
 *  height：视口高度
 *  device-width：渲染表面的宽度，就是设备屏幕的宽度
 *  device-height：渲染表面的高度，就是设备屏幕的高度
 *  orientation：检查设备处于横向还是纵向
 *  aspect-ratio：基于视口宽度和高度的宽高比        width/height  如：16/9，4/3

*  device-aspect-ratio：渲染表面的宽度，就是设备屏幕的宽度
 *  color：每种颜色的位数bits    如：min-color：16位，8位
 *  resolution：检测屏幕或打印机的分辨率    如：min-resolution

以上属性都可以添加min-或max-前缀

viewport视口：

*  布局视口（layout viewport）    宽度不变的
 *  可视视口（visual viewport）    显示布局视口的不同内容
 *  理想视口（ideal viewport）    理想视口就是布局视口在一个设备上的最佳尺寸

理想视口就是为构建手机浏览器优化的页面而添加

百度的设置

怎样分析设计图：

分析结构：实现部分区域的复用

### 如何组织项目目录结构 ###

*  约定优于配置（convention    over    configuration）
 *  约定代码结构或命名规范来减少配置数量
 *  css/\*.css
 *  jquery.js ->jquery.min.js

没有最好的组织方式，只有合适的组织方式

这是我的项目目录：

![70][]

使用markdown：

*  标题：\# 空一格+标题内容（一般有六级标题，二级标题加两个\#\#，以此类推）
 *  无序列表：\* 空一格+名称；    有序列表：1. 空一格+名称
 *  引用一段名言：> 空一格 \+引用的名言
 *  链接：\[百度\](http://www.baidu.com)
 *  加入图片：!\[百度\](http://www.baidu.com)
 *  粗体：用两个\*\*前后包裹住    斜体：用一个\*前后包裹住    粗体加斜体：用三个\*\*\*包裹
 *  表格：

|Col1|Col2|Col3|      //第一行
    |---|---|---|         //对齐方式     
    |aaa|111|222|         //内容
    |bbb|222|333|         //内容

对齐方式：|:---|:---|:---|    左对齐        |---|:---:|---|    居中       |---:|---:|---:|

必须写对齐方式

*  代码：\`在代码前后包裹，显示一行的代码；    多行的代码：用三个\`\`\`包裹

### 开始编写HTML代码 ###

检测IE版本，版本过低则提醒更新

header部分以及H5新增标签简介

*  header    头部    footer    底部
 *  nav    导航栏
 *  article    是一个特殊section，独立的有内容的区块
 *  section    标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
 *  b    加粗，吸引人注意
 *  em    重点强调
 *  i    定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。

命名规则：

一般都使用class定义样式，id一般用于js快速的区别和获取元素class，一般都用中横线分隔，id一般都使用驼峰命名法

项目的HTML结构（也可以在我的github看到：[点击进入][Link 1]）

<!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>理财网站</title>
    </head>
    <body>
    
    <p class="browserupgrade">你的浏览器版过低，请到<a href="http://browsehappy.com/">这里
        </a>更新，以获得最佳的体验</p>
    
    
    <header>
        <nav class="top">
            <span class="tel">理财热线：400-688-888</span>
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">快速注册</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">APP下载</a></li>
            </ul>
        </nav>
        <nav class="main">
            <a href="#" class="brand"><img src="img/logo@1x.png" alt="回到首页"></a>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">理财频道</a></li>
                <li><a href="#">投资频道</a></li>
                <li><a href="#">新手专区</a></li>
                <li><a href="#">安全保障</a></li>
            </ul>
        </nav>
    </header>
    
    <div class="container">
        <div class="transaction">
            <div class="trans-content">
                <div class="trans-data">
                    <span>平台累计成交金额</span>
                    <span class="trans-money">19888</span>
                    <span>万元</span>
                </div>
                <div class="trans-data">
                    <span>过去7日成交金额</span>
                    <span class="trans-money">1888</span>
                    <span>万元</span>
                </div>
                <div class="trans-report">
                    <a href="#">查看平台运营报告</a>
                </div>
            </div>
        </div>
    
        <div class="ad">
            <div class="item">
                <img src="img/ad001.png" alt="">
            </div>
            <div class="item">
                <img src="img/ad002.png" alt="">
            </div>
            <div class="item">
                <img src="img/ad003.png" alt="">
            </div>
        </div>
    
        <section class="feature">
            <div class="item">
                <h3>安全</h3>
                <p>国家AAA信用平台 <br>银行资金托管 <br>上市公司背景保证</p>
            </div>
            <div class="item">
                <h3>权威</h3>
                <p>中央电视台推荐 <br>互联网百强企业 <br>标准起草单位</p>
            </div>
            <div class="item">
                <h3>省心</h3>
                <p>100元旗头 <br>用户利益保障机制 <br>保险公司承保</p>
            </div>
        </section>
    
        <div class="notice">
            <a href="#">
                <span>201-6-31</span>
                元旦期间业务受理及值班元旦期间业务受理及值班元旦期间业务受理及值班元旦期间业务受理及值班
            </a>
            <a href="#" class="more">更多公告</a>
        </div>
    
        <section class="product">
            <h2>
                固定期限产品
                <em>甄选优质基金</em>
                <em>省时省力</em>
                <em>坐等收益</em>
            </h2>
    
            <div class="product-content">
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
        </section>
    
        <section class="product">
    
            <h2>
                固定期限产品
                <em>甄选优质基金</em>
                <em>省时省力</em>
                <em>坐等收益</em>
            </h2>
    
            <div class="product-content">
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益：<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额：<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
    
        </section>
    
        <section class="footer">
            <div class="footer-content">
                <p class="brand"></p>
                <ul>
                    <li class="title">关于我们</li>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">业务模式</a></li>
                    <li><a href="#">合作结构</a></li>
                    <li><a href="#">服务协议</a></li>
                </ul>
                <ul>
                    <li class="title">风险防范</li>
                    <li><a href="#">账户安全</a></li>
                    <li><a href="#">安全保障</a></li>
                </ul>
                <ul>
                    <li class="title">理财产品</li>
                    <li><a href="#">固定期限</a></li>
                    <li><a href="#">债权/散标</a></li>
                </ul>
                <ul>
                    <li class="title">交易帮助</li>
                    <li><a href="#">购买</a></li>
                    <li><a href="#">赎回</a></li>
                    <li><a href="#">提现</a></li>
                </ul>
                <ul>
                    <li class="title">机构服务</li>
                    <li><a href="#">机构中心</a></li>
                    <li><a href="#">合作联系</a></li>
                </ul>
            </div>
        </section>
    </div>
    
    <footer>
        <ul>
            <li><span class="icon icon-zfywxk">支付业务许可证</span></li>
            <li><span class="icon icon-pcirk">PCI认证</span></li>
            <li><span class="icon icon-visayz">Visa 验证</span></li>
            <li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
            <li><span class="icon icon-wlgs">网络工商</span></li>
            <li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
            <li><span class="icon icon-gs">北京工商</span></li>
        </ul>
        <p>北京某互联网金融公司 版权所有 @ 2017-2018 </p>
    </footer>
    
    </body>
    </html>

### 实现PC端样式 ###

*  使用Normalize.csss作为项目的初始css样式代码：[点击获取][Link 2]（消除浏览器之间的差异）

px、em、rem的区别

*  px相对于屏幕分辨率的一个单位，1px相当于1个像素 ，固定的单位
 *  em相对的长度单位；

1.  em相对参照物为父元素的font-size，
2.  em具有继承的特点，如果父元素没有设置font-size就向上找
3.  当没有设置font-size时，浏览器会有一个默认的em设置：1em = 16px
4.  em的缺点：容易错乱

*  rem的相对参照物为根元素html，相对于参照固定不变，所以比较好计算，当没有设置font-size时，浏览器会有一个默认的rem设置：1rem = 16px，这点与em一致的

font-size:  62.5%    1rem = 10px  (10/16\*100%)

font-size:  100%    1rem = 16px

清除浮动（目前最好的两种方法）：

.clearfix:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        zoom: 1;
    }

.clearfix:after,
    .clearfix:before {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

### 实现移动端样式 ###

使用媒体查询实现

*  设置断点：以常用的断点设置，不要为专门的设备设置断点，主要要以设计图为主
 *  断点区间设置不同的padding...之类的样式

CSS选择器：

*  E > F    ul > li 就是选ul下的子类li，不是子孙的li
 *  E + F    ul li + li 就是选ul下除了第一个的li外的所有li
 *  E ~F

ul li ~li就是选到除第一个li外的所有li（注意和第二种的差别）

属性选择器：

*  E\[attr\]    有attr这个属性就可以
 *  E\[attr = "value"\]    有attr这个属性，还要完全等于value这个值
 *  E\[attr^ = "value"\]    有attr这个属性，以value开头，如：a\[href^="http://"\]
 *  E\[attr$ = "value"\]    有attr这个属性，以value结尾,如：img\[src$=".png"\]
 *  E\[attr\* = "value"\]    有attr这个属性，包含value就可以了
 *  E\[attr~ = "value"\]    有attr这个属性，以空格分开的词汇都可以模糊的选择到
 *  E\[attr|= "value"\]    有attr这个属性，以value开头或者有value-开头的值

打印样式设置，在main.css最后面添加下面的代码即可：

@media print {
        *,
        *:before,
        *:after{
            background: transparent !important;
            color: #000 !important;
            box-shadow: none!important;
            text-shadow: none!important;
        }
    
        a,
        a:visited {
            text-decoration: underline;
        }
    
        a[href]:after {
            content: "(" attr(href)")";
        }
    
        abbr[title]:after {
            content: "(" attr(title)")";
        }
    
        /*
        *   使用#和JavaScript的超链接不打印href
        */
        a[href^="#"]:after,
        a[href^="javascript"]:after {
            content: "";
        }
    
        pre,
        blockquote {
            border: 1px solid #999999;
            /* page-break-inside只有opera浏览器起作用，避免在元素内部插入分页符*/
            page-break-inside: avoid;
        }
    
        thead {
            display: table-header-group;
        }
    
        tr,
        img{
            page-break-inside: avoid;
        }
    
        img {
            max-width: 100%!important;
        }
    
        p,
        h2,
        h3 {
            /* 这两个属性的作用，当标题和文字底部发生分页时，保证标题和内容不会分开 */
            orphans: 3;
            widows: 3;
        }
    
        h2,
        h3 {
            page-break-after: avoid;
        }
    }

### 如何实现响应式广告和响应式图片 ###

一个好的广告滚动组件支持：

*  支持不同的图片数量
 *  支持响应式布局
 *  具有良好的兼容性

怎么样来挑选第三方组件：

*  使用人数
 *  是否开源
 *  文档是否齐全
 *  活跃性
 *  小乔够用的组件(轻量级)

这里选用的是Owl Carousel 2，链接：[点击打开链接][Link 3]

响应式图片：

*  js或者服务端实现(服务端实现：通过把屏幕或者设备信息写入cookie，在获取图片的时候，由服务端决定返回那种图片)
 *  srcset    img标签中的一个属性，

由浏览器自己来选择图片，当加载了大图片时，缩小浏览器，图片不会变，浏览器认为图片已经加载在html中了

*  srcset配合sizes

*  picture

可以设置多个source来进行响应式图片的设计，还可以设置宽屏、横屏下的图片显示不同；也可以支持webp图片

webp是谷歌开发出来的图片，更小

*  svg

矢量图形,无论浏览器怎么缩放，图片都不会失真

这里有两个在线绘制的网站：[IcoMoon][]    [http://editor.method.ac/][http_editor.method.ac]

这里项目的响应式图片处理：

这里使用picture，需要使用一个库：[picturefill][] 来处理picture的兼容性

对svg的图片进行压缩：[iconizr][]

对png的图片进行压缩：[tinypng][]

可以在我的github上查看这个项目：[responsive-project][Link 1]，如果想自己看视频学习，可以加我百度云（任性的\_我），免费赠送学习视频

### Node.js简介 ###

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动，非阻塞式 I/O的模型，使其轻量又高效。Node.sj的包管理器npm，是全球最大的开源库生态系统。

npm的使用：

*  npm install +包名，如：npm install jquery（在国内最好使用cnpm，在我的这篇博客上写了具体的安装方法 [npm与调试工具的安装][npm]）
 *  cnpm init     创建package.json（这里使用的cnpm是npm的镜像，使下载更快）

其中package.json下有两个依赖：

"dependencies": {},
    "devDependencies": {},

*  "dependencies"是用于配置生产环境  
    
 *  "devDependencies"是用于配置开发环境

"dependencies": {
        "jquery": "^3.3.1"
      },

*   "jquery": "^3.3.1"    前面写包名，后面写包的版本  
    
 *  ^是使版本号在大于等于3.3.1的版本号都可以，注意大版本号需要相同；如：3.4.\* ， 3.5.\*

使用node.js下的http-server服务，就可以在网站上通过相应的端口号进行访问，不在是只在本地才可以访问（http-server 网站：[点击打开][Link 4]）

*  安装：cnpm install http-server -g

### 处理兼容性以及在多个设备上进行调试 ###

PC端如何处理兼容性：

*  在主要的浏览器上都要进行测试，如：谷歌、火狐、欧朋、IE等浏览器上进行测试
 *  下载IETester进行IE的测试

移动端处理兼容性：

*  Genymotion来进行安卓虚拟机的测试   [genymotion][]  
    
 *  hack的兼容性问题 ，使用这个网站：[browserhacks][]
 *  解决IE低版本不支持h5新标签的问题，使用这个方法：[html5shiv][]
 *  解决IE低版本不支持css3条件查询的问题，使用这个：[Respond][]  
    
 *  主动的测试：[modernizr][] (防御性编程)，可以检测新特性在不同浏览器的兼容性。
 *  也可以在这个网站查属性的兼容性：[can i use][]

在多个设备上进行调试：

*  使用这个网站：[浏览器同步测试工具][Link 5]

### 打包发布 ###

*  在发布之前还可以做代码优化：

1.   压缩
2.  合并
3.  增加版本号

压缩可以使用手动的方法，直接把代码拷到这个网站：[javascript-minifier][]

*  主流的3个工具

1.  Grunt    （自动化构建工具）
2.  Gulp    （自动化构建工具）
3.  Webpack    （静态资源打包工具）

Gulp中文文档：[gulp中文文档][gulp]

安装gulp：

cnpm install gulp -g
    cnpm install gulp --save-dev

安装gulp所需的插件：

cnpm install gulp-dev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

这些插件的作用：

*  gulp-dev     添加版本号，给每个文件计算一个哈希码，当文件发生改变时，哈希码也会发生改变
 *  gulp-rev-replace    当文件名改变了，把文件的引用也修改为新的文件名  
    
 *  gulp-useref     通过注释来告诉gulp把哪些文件进行一些合并，怎么的方式合并，合并之后文件的命名（网站：[gulp-useref][]）  
    
 *  gulp-filter    把文件做一些压缩，然后又把文件放回去  
    
 *  gulp-uglify      压缩js的插件  
    
 *  gulp-csso     压缩css的插件

代码如下：

执行后的结果：

![70 1][]

就把所有需要打包的文件处理好了

使用/\*! \*/注释来注释就不会被打包掉（版本号之类的）

还有一些有趣的插件：

*  gulp-watch：监听文件的变化自动给我们打包 ；网址：[gulp-watch][]
 *  gulp-postcss：通过多个插件来管理CSS，但只解析CSS一次。网址：[gulp-postcss][]  
    
 *  gulp-concat :把所有的js文件合并成all.js文件。 网址：[gulp-concat][]  
    
 *  gulp-responsive：可以把一个大图片直接生成一定规则的响应式图片。    网址：[gulp-responsive][]

### 补充--1选择一个趁手的IDE ###

Webstorm：

*  快速查找
 *  代码补全
 *  版本控制
 *  本地历史
 *  即时模板
 *  光标
 *  代码格式化

对于文件的模板可以进行自定义设置(File ->setting ->file and Code Templates)

查看本地历史，可以看我们修改的记录(在文件中右键-> Local History ->Show History)

代码格式化（Code ->Reformat Code ）

快捷键设置（File -> Keymap-右栏）

Webstorm进阶操作：

Emmet：（文档地址：[Emmet][]）

*  嵌套 （> , \+ , ^ , \* , ()） 
 *  属性 （\# ， .  , \[\] , $ , \{\} ）
 *  创作没有意义的文字    ( lorem )

注意事项：一定要把光标定义到快速创建的代码最后面（如 ul>li>a，就要把光标放在a的后面）；快速创建的代码中不要有空格

*  CSS补全规则（[点击打开链接][Link 6]）

[70]: /images/20220522/4e8e2831c0f041b7af708f2ee2f29619.png
[Link 1]: https://github.com/HZhen/responsive-project
[Link 2]: http://necolas.github.io/normalize.css/
[Link 3]: http://owlcarousel2.github.io/OwlCarousel2/index.html
[IcoMoon]: https://icomoon.io/
[http_editor.method.ac]: http://editor.method.ac/
[picturefill]: http://scottjehl.github.io/picturefill/
[iconizr]: https://iconizr.com/
[tinypng]: https://tinypng.com/
[npm]: https://blog.csdn.net/wo_921110/article/details/78770114
[Link 4]: https://github.com/indexzero/http-server
[genymotion]: http://www.genymotion.net
[browserhacks]: http://browserhacks.com/
[html5shiv]: https://github.com/aFarkas/html5shiv
[Respond]: https://github.com/scottjehl/Respond
[modernizr]: https://modernizr.com/
[can i use]: https://caniuse.com/
[Link 5]: http://www.browsersync.cn/
[javascript-minifier]: https://javascript-minifier.com/
[gulp]: https://www.gulpjs.com.cn/
[gulp-useref]: https://www.npmjs.com/package/gulp-useref
[70 1]: /images/20220522/a385a0b6091c4e2393977427f6056e21.png
[gulp-watch]: https://www.npmjs.com/package/gulp-watch
[gulp-postcss]: https://www.npmjs.com/package/gulp-postcss
[gulp-concat]: https://www.npmjs.com/package/gulp-concat
[gulp-responsive]: https://github.com/mahnunchik/gulp-responsive
[Emmet]: https://docs.emmet.io/abbreviations/syntax/
[Link 6]: https://docs.emmet.io/css-abbreviations/