响应式开发原理

什么是响应式网站?

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

响应式网站的概念:

  • 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

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

这是我的项目目录:

响应式开发原理_第1张图片

使用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看到:点击进入)




    
    
    
    理财网站



你的浏览器版过低,请到这里 更新,以获得最佳的体验

平台累计成交金额 19888 万元
过去7日成交金额 1888 万元

安全

国家AAA信用平台
银行资金托管
上市公司背景保证

权威

中央电视台推荐
互联网百强企业
标准起草单位

省心

100元旗头
用户利益保障机制
保险公司承保

固定期限产品 甄选优质基金 省时省力 坐等收益

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

固定期限产品 甄选优质基金 省时省力 坐等收益

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

3个月

约定年化收益:3.5%

总成交金额:1888万元

  • 支付业务许可证
  • PCI认证
  • Visa 验证
  • VerSign加密服务
  • 网络工商
  • 电子商务协会认证诚信网
  • 北京工商

北京某互联网金融公司 版权所有 @ 2017-2018

实现PC端样式

  • 使用Normalize.csss作为项目的初始css样式代码:点击获取(消除浏览器之间的差异)

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,链接:点击打开链接

响应式图片:

  • js或者服务端实现(服务端实现:通过把屏幕或者设备信息写入cookie,在获取图片的时候,由服务端决定返回那种图片)
  • srcset    img标签中的一个属性,
    由浏览器自己来选择图片,当加载了大图片时,缩小浏览器,图片不会变,浏览器认为图片已经加载在html中了
  • srcset配合sizes
  • picture

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

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

  • svg

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

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

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

这里使用picture,需要使用一个库:picturefill 来处理picture的兼容性

对svg的图片进行压缩:iconizr

对png的图片进行压缩:tinypng

可以在我的github上查看这个项目:responsive-project,如果想自己看视频学习,可以加我百度云(任性的_我),免费赠送学习视频

Node.js简介

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

npm的使用:

  • npm install +包名,如:npm install jquery(在国内最好使用cnpm,在我的这篇博客上写了具体的安装方法 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 网站:点击打开)

  • 安装:cnpm install http-server -g

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

PC端如何处理兼容性:

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

移动端处理兼容性:

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

在多个设备上进行调试:

  • 使用这个网站:浏览器同步测试工具

打包发布

  • 在发布之前还可以做代码优化:

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

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

  • 主流的3个工具

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

    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的插件

    代码如下:

var gulp = require("gulp");
var rev = require("gulp-dev");
var revReplace = require("gulp-rev-replace");
var useref = require("gulp-useref");
var filter = require("gulp-filter");
var uglify = require("gulp-uglify");
var csso = require("gulp-csso");


gulp.task('default', function () {
    var jsFilter = filter('**.*.js', {restore: true});
    var cssFilter = filter('**.*.css', {restore: true});
    var indexHtmlFilter = filter(['**.*', '!**/index.html'], {restore: true});

    //每一个pipe就相当于过滤器一样
    return gulp.src('src/index.html')
        .pipe(useref())
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore)
        .pipe(indexHtmlFilter)
        .pipe(rev())
        .pipe(indexHtmlFilter.restore)
        .pipe(revReplace())
        .pipe(gulp.dest('dist'));
});

    执行后的结果:

响应式开发原理_第2张图片

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

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

    还有一些有趣的插件:

  • 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补全规则(点击打开链接)

你可能感兴趣的:(响应式开发的原理,前端)