精华内容
下载资源
问答
  • bootstrap 响应式 旅游网站开发 QQ临时会话 百度地图api调用 首页 分页 登录 注册 仿携程网站 bootstrap 响应式 旅游网站开发 QQ临时会话 百度地图api调用 首页 分页 登录 注册 仿携程网站
  • 响应式+bootstrap+HTML5+JavaScript网页课程,收集整理课程相关源代码方便个位看官学习
  • 响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。...

    题目点评

    响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。

    什么是响应式

    顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。



    需要用到的技术

    1. Media Query(媒体查询)

    用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。

    2. 使用em或rem做尺寸单位

    用于文字大小的响应和弹性布局。

    3. 禁止页面缩放

    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

    4. 屏幕尺寸响应

    a)  固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

    b)  流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

    c)  自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

    d)  栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

    响应式设计注意事项 

    1.宽度不固定,可以使用百分比

    #head{width:100%;}
    #content{width:50%;}

    2. 图片处理

       图片的宽度和高度设置等比缩放,可以设置图片的width为百分比,height:auto;

       背景图片可以使用background-size 指定背景图片的大小。

    展开全文
  • 响应式网页设计:Bootstrap开发速成的配套资源,提供120多个Bootstrap功能范例网页文件,说明如何使用Bootstrap框架所提供的各种CSS与组件等内容,最终以3个完整实例(书籍宣传网页、产品推广网页、网站首页)制作出...
  • Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;Bootstrap响应式网站开发;...
  • 本项目是通过rem em 百分比 media 进行原生轻量响应式网站开发,上手非常简单,也可以当做二次开发的模板,兼容处理到ie8及其以上。
  • 响应式开发视频教程

    2019-01-29 20:10:43
    响应式开发视频教程
  • 响应式Web开发项目教程,第一章里面的全部内容,有完整的代码
  • 响应式Web开发项目教程,第二章里面的全部内容,有完整的代码
  • 响应式网页开发 响应式布局.ppt
  • 响应式框架bootstrap框架教程,包括源码,课件,课后习题
  • 为您提供Per.js 响应式开发框架下载,Per.js是一个开源的渐进式+响应式的大型JavaScript开发框架,他拥有一系列简便的DOM操作函数,例如Vue的模板渲染、双向绑定等等。同时他的执行速度还是Vue的7~8倍。尽管他的DOM...
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)》-教学PPT
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)》-教学PPT.rar,需要下载的从速!
  • 响应式开发原理

    千次阅读 2018-06-19 22:59:50
    什么是响应式网站?就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计响应式网站的概念:flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询响应式网站的优点:减少...

    什么是响应式网站?

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

    响应式网站的概念:

    • 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)    理想视口就是布局视口在一个设备上的最佳尺寸

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

    <meta name="viewport" content="width=device-width/>"	

    百度的设置

    <meta name="viewport" content="width=device-width,
    minimum-scale=1.0,		//最小的缩放比例
    maximum-scale=1.0,		//最大的缩放比例
    user-scalable=no/>"	
    怎样分析设计图:

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

    如何组织项目目录结构

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

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

    这是我的项目目录:


    使用markdown:

    • 标题:# 空一格+标题内容(一般有六级标题,二级标题加两个##,以此类推)
    • 无序列表:* 空一格+名称;    有序列表:1. 空一格+名称
    • 引用一段名言> 空一格 +引用的名言
    • 链接:[百度](http://www.baidu.com)
    • 加入图片:![百度](http://www.baidu.com)
    • 粗体:用两个**前后包裹住    斜体:用一个*前后包裹住    粗体加斜体:用三个***包裹
    • 表格:   
    |Col1|Col2|Col3|      //第一行
    |---|---|---|         //对齐方式     
    |aaa|111|222|         //内容
    |bbb|222|333|         //内容
            对齐方式:|:---|:---|:---|    左对齐        |---|:---:|---|    居中       |---:|---:|---:| 

            必须写对齐方式

    • 代码:`在代码前后包裹,显示一行的代码;    多行的代码:用三个```包裹

    开始编写HTML代码

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

    <!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>
    <!--[if ht/lt/gte >=/lte <= IE8]-->
    <p class="browserupgrade">
        你的浏览器版过低,请到<a href="http://browsehappy.com/">这里
        </a>更新,以获得最佳的体验
    </p>
    <!--[endif]-->
    
    </body>
    </html>
    header部分以及H5新增标签简介

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

    命名规则:

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

    项目的HTML结构(也可以在我的github看到:点击进入

    <!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>
    <!--[if ht/lt/gte >=/lte <= IE8]-->
    <p class="browserupgrade">你的浏览器版过低,请到<a href="http://browsehappy.com/">这里
        </a>更新,以获得最佳的体验</p>
    <!--[endif]-->
    
    <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样式代码:点击获取(消除浏览器之间的差异)

    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>
            <a href=""></a>
            <a href=""></a>
            <li></li>
        </ul>

        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标签中的一个属性,
    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">
    </div>
        由浏览器自己来选择图片,当加载了大图片时,缩小浏览器,图片不会变,浏览器认为图片已经加载在html中了
    • srcset配合sizes
    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
            sizes="(min-width:800px) calc(100vw - 30em), 100vw">
    </div>
    • picture
    <div class="content">
        <picture>
            <source media="(min-width:36em)"
                    srcset="img/tiananmen-s.jpg 768w"/>
            <source media="(min-width:36em)"
                    srcset="img/tiananmen.jpg 1600w"/>
            <source type="image/svg+xml" srcset="logo.svg 480w, logo.svg 800w,logo.svg 1600w"/>
            <source type="image/webp" srcset="logo.webp 480w, logo-m.webp 800w,log-lo.webp 1600w"/>
    
            <img class="image" src="img/tiananmen.jpg" alt="">
        </picture>
    </div>

    可以设置多个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'));
    });

        执行后的结果:


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

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

        还有一些有趣的插件:

    • 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的后面);快速创建的代码中不要有空格

    展开全文
  • 响应式页面案例

    2019-03-29 19:28:43
    一个使用了bootstrap框架,同时使用了less的案例,实现了简单的响应式页面效果
  • saas软件开发响应式网页模板
  • APP项目开发服务响应式网站模板
  • 适合前端入门者学习,视频资源囊括项目前期准备、响应式设计、pc移动端样式自适应、多设备调试和后期打包等多阶段流程详解
  • 网页开发DIV+CSS谷歌响应式插件,网页开发DIV+CSS谷歌响应式插件,在响应式的网页开发时,非常需要的几款本地测试插件。
  • 蓝色APP产品开发响应式网页模板
  • 用于响应式Web开发的HTML5 JavaScript组件套件
  • 响应式前端框架

    2017-03-21 15:39:46
    功能全面的响应式前端模板
  • 响应式开发bootstrap

    2017-08-18 14:28:17
    针对响应式开发bootstrap,内容详细,各种布局使用、说明,有代码贴图讲解
  • 响应式游戏开发展示类网站织梦模板(自适应手机端)+利于SEO优化 模板介绍: 织梦最新内核开发的模板,该模板属于企业通用、HTML5响应式、游戏开发展示类企业使用,一款适用性很强的模板,基本可以适合各行业的企业...
  • flutter-web-demo :基于 Flutter/Dart 开发响应式 Web 应用的示例
  • bootstrap响应式旅游网站
  • 什么是响应式网页?

    千次阅读 2020-11-27 14:46:22
    进入移动互联网时代,各种不同的移动智能设备层出不穷,比如说智能手机、平板电脑、可穿戴设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果,截至2017年6月,我国网民规模达到7.51亿,其中...

    进入移动互联网时代,各种不同的移动智能设备层出不穷,比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果,截至2017年6月,我国网民规模达到7.51亿,其中手机网民达7.24亿,占比达96.3%,较2016年底增长了1.2个百分点,与此同时,使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中,移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的,而且即使是同一个设备,当用户旋转屏幕时,纵向和横向查看的屏幕尺寸也会有差异,所以如何使网页在不同的设备和不同的屏幕分辨率下都能达到理想的显示效果,使得用户不管通过什么终端都能达到理想的浏览和使用体验,是新型的网页设计与开发技术所要达到的需求。显然,传统固定布局的方式已经无法满足这种需求了,因此,现在越来越多的网站都已经开始采用响应式的思想来设计与开发网页。响应式网页设计已经成为当今网页开发技术的新潮流。

    响应式网页设计的产生

    响应式网页设计,全称是Responsive Web Design,最早是由伊桑·马卡特(Ethan Marcotte)在2010年提出的一个概念,最主要的动机是“如何使得页面布局适应任何的浏览窗口”。响应式页面的设计理念是,页面的设计与开发应当能够根据用户的行为以及设备环境(包括系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,也就是页面应该有能力去自动响应用户的设备环境。简而言之,这个概念指的就是网站的页面能够兼容多种不同的终端,根据不同的环境做出自动的响应及调整。

    响应式网页开发的实现方案有很多,包括CSS媒体查询的使用、弹性网格和布局、流式图像等。无论用户使用的是哪种设备,响应式页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以实现自动的适应。

    伊桑·马卡特在其个人网站上给出了响应式网页的简单示例。这个网站虽然简单,却具备了响应式网页的要素:自动适应、流式网格布局、流式图像显示等等。读者可以尝试浏览这个网页,通过手动拖动鼠标改变浏览器窗口的大小,查看在不同浏览器窗口尺寸下页面显示的变化。可以看到,在不同的浏览器窗口尺寸下,网页的地址没有发生变化,但网页的布局显示却可能有所改变,如图所示。

    响应式网页在不同显示尺寸下的布局变化

    响应式和“自适应网页”

    提到响应式网页,不得不提的就是另一个“自适应网页”的概念了。初学者对于这两个概念往往容易混淆。响应式网页具有自适应的特性,是指页面能自动响应及适配用户的设备环境,但平常所说的“自适应网页”是否就是响应式网页呢?

    答案是否定的。适配不同浏览环境的技术有很多,而传统意义上的“自适应网页”虽然也可以针对不同的浏览环境做出自动调整,但其使用的并不一定是响应式网页的技术。比如早期的一些网站或现在一些门户网站的首页,可以根据检测到的不同的客户端而提供不同的浏览网页,比如专门提供一个Android的版本,或者一个iPhone / iPad的版本等,这也是实现网站兼容不同终端的其中一种做法。我们往往可以看到一些“自适应”网站的首页,用PC端浏览时访问的是类似“www.xxx.com”的地址,而使用移动设备访问的是类似“m.xxx.com”的地址,可见打开的并非同一个网页。事实上这种做法同时提供了多个不同的网页,好处是可以极大地保证不同环境下的显示效果,但是缺点也非常明显,就是在网站维护时需要同时兼顾多个不同版本的网页,而且维护的工作将会呈几何级数上升。假如这个网站有多个入口,还会大大地增加架构设计的复杂度。所以,这种使用不同页面来适配浏览条件的方式,往往比较多见于网站的首页,因为如果网站的所有内容页都采用这种方式,这个网站的结构将会变得非常臃肿。而类似这种跳转到不同地址、打开不同网页的适配方式,并不能称为真正的响应式网页,只能叫作“自适应”的。

    响应式网页的特点

    响应式网页的核心思想,在于“一次设计,普遍适用”,强调的是让同一个地址的同一个网页自动地去适应不同的显示环境,并且能够根据屏幕的设置和布局需要,来自动调整网页内容的显示。而响应式的网站,不管使用什么设备,打开及显示的都是同一个地址、同一个网页,只是这个网页可以通过自动地识别屏幕宽度,对不同的使用环境做出相应的自动调整,从而造成网页的布局和内容展示在不同环境下时可能会有所不同。

    开发响应式网页时,首先我们需要改变一下以往的观念,在开发时“以移动设备优先”。为什么要选择移动优先呢?第一个原因就是现在移动设备的使用率越来越高,而且随着移动互联网技术的发展,移动端的应用将成为重点。

    还有基于网站开发流程方面的考虑。打个比方,想象一下我们搬家的时候,如果我们要把所有的东西从一个大房子搬到一个小房子,那么很有可能空间会比以前拥挤,而且如果东西太多放不下,可能要不得不舍弃掉一些东西,这种“舍弃”有时会是一个很艰难的决定。但是如果反过来,从一个小房子搬到一个大房子,那么空间会宽松很多。同样的道理,移动端稍微偏小的屏幕尺寸会使得空间比较受限,那么就要求我们在设计时考虑把最重要的内容优先加载和展示,这样,即使后面迁移到较大的屏幕,也可以保证整体的结构不会受到破坏,也许为了页面的美观可能需要增加一些内容,但毕竟做加法会比做减法容易得多。而且由于大小、带宽等限制,移动网页的设计绝大部分应该是内容性的设计,移动优先原则下提高用户体验的一大法宝,就是“把最重要的东西放在最显眼的地方”。

    在这里先给出响应式网页的一些特点。在后面的学习中,我们将深入学习这些特点在网页中的实现。

    (1)媒体查询技术(Media Query)。响应式网页往往包含多个媒体查询语句,用于适配不同的显示条件。

    (2)流式网格布局(Fluid Grid Layout)。让网页元素来决定网格的大小和设计,并根据网页元素来决定所占用的网格位置尺寸。

    (3)灵活的多媒体显示(Flexible Media)。根据不同设备、不同分辨率、不同网速等环境,来自动适配多媒体内容的显示。比如可以让同一个图像,在iPhone 6上显示“高清”的版本,而在iPhone 4上只显示“一般”的版本。

    (4)高性能的JavaScript脚本。由于有些用户终端的运行条件有限,响应式网页里的脚本肯定要考虑运行效率的问题。现在已有一些较成熟的JavaScript框架,比如jQuery等,能大大改进脚本程序的运行性能和效率。

    展开全文
  • iOS手机APP开发响应式网页模板

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 281,943
精华内容 112,777
关键字:

响应式开发是什么