精华内容
下载资源
问答
  • 本文主要简单介绍了频率响应的一般概念
  • 响应概念

    千次阅读 2014-03-27 17:35:11
    响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率...
    

    原文地址:http://isux.tencent.com/responsive-web-design.html


    概念

    响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。

    背景

    PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%。预计到2015年,移动互联网的数据流量将超越PC端的流量。

    移动端入口:当用户希望通过手机来完成PC页的操作时,常见的是商家的运营微博,期文案足够吸引用户点击链接参加活动,如果该活动页没做响应式处理:页面体积大、请求多、体验差、兼容性差,层层阻碍最终导致用户放弃参加。

    优势

    开发成本低,门槛低

    • Native APP:Objective-C or Java – 学习成本高
    • Hybrid APP: 外壳+Web APP,需安装。
    • 响应式Web APP:HTML5+JS+CSS – 门槛低,极易上手,迭代快

    跨平台和终端且不需要分配子域

    虽然可通过监测用户UA来判断用户终端后做跳转,但它还是分配了多个域,而响应式无需监测用户UA没有域的切换,只需根据终端类型来适配不同的功能模块与表现样式,它是跨平台和终端的,1页面适配多终端。

    • PC – http://qzone.com
    • Mobile – http://m.qzone.com
    • 响应式:PC & Mobile – http://qzone.com 无需跳转

    本地存储

    Web App可以利用本地存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,减少重要信息在传输过程中被泄露,增量传输修改内容。

    无需安装成本,迭代更新容易

    responsive-web-design

    更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一

    实施

    首先我们应该遵循移动优先原则,交互&设计应以移动端为主,PC则作为移动端的一个扩展;
    一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:

    1. 响应式布局
    2. 响应式内容(图片、多媒体)

    响应式布局

    如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?

    那么我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:

    响应式布局

    那么我们要怎么做?

    Meta标签定义

    使用 viewport meta 标签在手机浏览器上控制布局

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

    通过快捷方式打开时全屏显示

    1
    
    <meta name="apple-mobile-web-app-capable" content="yes" />

    隐藏状态栏

    1
    
    <meta name="apple-mobile-web-app-status-bar-style" content="blank" />

    iPhone会将看起来像电话号码的数字添加电话连接,应当关闭

    1
    
    <meta name="format-detection" content="telephone=no" />

    神飞:很多人常常使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染而不会自动缩放,用户需要手动移动页面或者缩放。最差的是和initial-scale=1同时使用user-scalable=no或maximum-scale=1,这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所以,请记住:如果你的网站不是响应式的,请不要使用initial-scale或者禁用缩放。

    使用 Media Queries 适配对应样式

    常用于布局的CSS Media Queries有以下几种

    设备类型(media type):

    all所有设备
    screen 电脑显示器
    print打印用纸或打印预览视图
    handheld便携设备
    tv电视机类型的设备
    speech语意和音频盒成器
    braille盲人用点字法触觉回馈设备
    embossed盲文打印机
    projection各种投影设备
    tty使用固定密度字母栅格的媒介,比如电传打字机和终端

    设备特性(media feature):

    width浏览器宽度
    height浏览器高度
    device-width设备屏幕分辨率的宽度值
    device-height设备屏幕分辨率的高度值
    orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape
    aspect-ratio比例值,浏览器的纵横比
    device-aspect-ratio比例值,屏幕的纵横比

    example:

    1
    2
    3
    4
    
    /* for 240 px width screen */
    @media only screen and (max-device-width:240px){
    	selector{ ... }
    }
    1
    2
    3
    4
    
    /* for 320px width screen */
    @media only screen and (min-device-width:241px) and (max-device-width:320px){
    	selector{ ... }
    }
    1
    2
    3
    4
    
    /* for 480 px width screen */
    @media only screen (min-device-width:321px)and (max-device-width:480px){
    	selector{ ... }
    }

    适用于布局的 Media Queries 这里不做详述,可通过官方文档进一步了解
    那么对于表格(table)的响应式处理该是怎样的呢?我们该如何突破Table的局限性呢?
    接下来我们来了解以下的几种针对表格响应式处理的方法:

    隐藏不重要数据列

    table
    处理前

    r7
    处理后

    实现方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    @media only screen and (max-width: 800px) {
    	table td:nth-child(2), 
    	table th:nth-child(2) {display: none;}
    }
     
    @media only screen and (max-width: 640px) {
    	table td:nth-child(4),
    	table th:nth-child(4),
    	table td:nth-child(7),
    	table th:nth-child(7),
    	table td:nth-child(8),
    	th:nth-child(8){display: none;}
    }

    以用户角度思考,每个人对数据的认知不同,或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。

    多列横向变2列纵向

    table
    处理前

    responsive-table
    处理后

    实现方法:<thead>定位隐藏,<td>变块元素,并绑定对应<th>列名,然后用伪元素的content:attr(data-th)实现<th>

    responsive-table

    固定首列,剩余列横向滚动

    table
    处理前

    responsive-table
    处理后

    实现原理:

    1
    2
    
    thead {float:left;}
    tbody {display:block;width:auto;overflow-x:auto;}

    栅格框架推荐

    响应式图片

    responsive-image

    带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

    处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。

    解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签<picture>,因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下,为之后的内容做个铺垫。

    <picture>是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <picture width="500" height="500">
       <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
       <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
       <source srcset="small-1.jpg 1x, small-2.jpg 2x">
       <img src="small-1.jpg" alt="">
       <p>Accessible text</p>
       <!-- Fallback content-->
       <noscript>
          <img src="external/imgs/small.jpg" alt="Team photo">
       </noscript>
    </picture>

    source: 一个图片源;media: 媒体查询,用于适配屏幕尺寸;srcset: 图片链接,1x适应普通屏,2x适应高清屏;<noscript/>: 当浏览器不支持脚本时的一个替代方案;<img/>: 初始图片;另外还有一个无障碍文本,类似<img/>alt属性。

    <picture>目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理的类库Picturefill

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <span data-picture data-alt="图片描述文本">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
        <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
        <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
        <!-- 浏览器不支持JS时的备用方案. -->
        <noscript>
            <img src="external/imgs/small.jpg" alt="图片描述文本">
        </noscript>
    </span>

    其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片, 逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。

    当然,在未来的 CSS Image Level 4 中已经实现了响应式图片的原生语法: image-set

    1
    2
    
    <image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
    <image-set-decl> = [ <image> | <string> ] <resolution>
    那么我们的响应式图片可以这样重写了

    1
    2
    
    background-image:url(default.jpg);  /* 普通幕 */
    background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);  /* Retina高清屏 */

    注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。

    当然除此之外,还有其他的响应式处理,如服务端user-agent嗅探
    以下是部分项目地址,感兴趣的可以了解下:

    高分辨率(DPI)下的响应式处理

    1. SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美,在我大中华这是硬伤。
    2. Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。
    3. -webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)

    JS检测:var retina = window.devicePixelRatio > 1;

    CSS Media Query:

    1
    2
    3
    4
    
    @media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
           (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
           (min-resolution: 2dppx),             /* The standard way */
           (min-resolution: 192dpi)             /* dppx fallback */

    高DPI媒体查询规则将在下一篇文章中做详解,敬请期待

    高分辨率下的1px border

    Retina

    由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案

    在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    @media only screen and (-webkit-min-device-pixel-ratio:1.5),
           only screen and (min-device-pixel-ratio:1.5) {
     
      button {
        border:none;
        padding:0 16px;
        box-shadow: inset 0 0 1px #000,
                    inset 0 1px 0 #75c2f8,
                    0 1px 1px -1px rgba(0, 0, 0, .5);
      }
     
    }

    demo

    留给我们的思考

    • 响应式不只是技术的实现,它更像是一种对于设计的全新思维模式
    • 浏览的体验短期内还无法超越原生应用
    • 左手操作习惯的交互
    • Webapp的消息推送
    • 调用本地文件系统的能力弱
    • 响应式图片的解决方案
    • 对PC事件的兼容
    • WebAPP页面体积的响应式适配
    • 代码实现和内容可维护性之间的权衡
    • 控制设计开发成本

    实用技巧

    • 点击区域不限于元素的视觉区域,便于用户点击。同时排版不受限制,可以达到原生App的视觉效果。
    • 气泡框可以减少页面跳转,适合消息提醒等微任务的处理。
    • 信息架构上越来越接近原生App,有利于扁平化层级关系和减少界面跳转等设计元素将得到更多的应用。
    • 识别更多的手势操作,如下拉刷新和右滑存档等平移手势。操作不必全部呈现在界面中,和平台操作保证一致。
    • 调用系统硬件,如重力感应等传感器、多媒体设备,不过在手机端还鲜有应用案例,离大规模应用还有一定的距离。

    感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
    注明出处格式:腾讯ISUX (http://isux.tencent.com/responsive-web-design.html)

    展开全文
  • 时尚家居概念设计响应式网站模板
  • 要理解这几个概念,首先要从“微分方程的解“的结构说起, 参考:《常系数线性微分方程的解法》 (1) (2) 我们对物理系统进行建模时,列出的微分方程多为”非齐次、线性“,如上式(2)所示,由上面的定理7...

    要理解这几个概念,首先要从“微分方程的解“的结构说起,

    参考:《常系数线性微分方程的解法》

    (1)

    (2)

    我们对物理系统进行建模时,列出的微分方程多为”非齐次、线性“,如上式(2)所示,由上面的定理7可知,这种非齐次微分方程的通解y(t)由两部分相加:①对应的”齐次微分方程“的通解y1(t),②一个该非齐次微分方程的特解y2(t)。

    y(t)就是该物理系统的输出信号的时域表达式,显然该表达式中的y1(t)部分跟输入信号f(t)无关,那么y1(t)就称为该系统的”自由响应“,y2(t)跟输入信号f(t)相关,称为系统在输入信号作用下的”强迫响应“,《机械工程控制基础》第6版,p83最后一段

    关于特征根:按照”线性微分方程的解”相关理论,对齐次方程做拉氏变换后,可以得到一个关于复变量s的代数方程,我们知道,“方程的解的形式”与“这个s代数方程的根的情况”直接相关,所以我们把这个代数方程(特征方程)的根称为特征根。那么这两者的关系是什么?如下所示:

    ①特征根均为单实根,则齐次微分方程的解的形式一定是:

    ②特征根为一重共轭复根,形如α±βi,则齐次微分方程的解的形式一定是:

    ③特征根为k重根(还可细分为k重实根/k重复根),则解的形式是:

    实际上以上种种情况都是③的特例,直接看一个特征方程的例子,特征方程是以s为变量的高次多项式:

    一个高次多项式,在复数域内一定可以进行因式分解,化为这种形式:

                          (3)

    题外话:为什么一定能因式分解为上述形式,例如:

    在实数域无法分解,但在复数域就能分解为:

    下面回到正题,继续看上面的③,

    式(3)总共有k1+k2+```+kn个复数根,这些ki中可能有一些为0,这样相应的特征根λi就变成了单重根,否则就是ki重根;如果某个特征根λi的虚部为0,那么λi就是ki重实根。显然根据ki的不同、λi实虚部的不同,可以涵盖前面所述的三种情况。

    直接给出结论得了,式(3)对应的齐次微分方程的解的基为:

    也即,微分方程的解为:上图中的每一项*cij,再相加(如果λi含虚部,还可把e^λit进一步欧拉展开)。

    利用这条结论,我们来做几个例子:

    例1:已知某齐次线性微分方程的特征方程为(s-5)(s+3)^2=0,问该微分方程的解?

    分析:特征根为:λ1=5 (重数k1=1)、λ2= -3(k2=2),那么根据上图,我们可以写出微分方程的解空间的基为:

    从而得到解为:,式中c1、c2、c3为任意实数

    例2:已知某齐次线性微分方程的特征方程为(s-5)(s^2+2s+5)^2=0,问该微分方程的解?

    该特征方程的根为:

    λ1=-1+2j (重数k1=2)、λ2=-1-2j (重数k2=2)、λ3=5 (重数k3=1),那么根据上图写出解的基为:

    根据解的基,可以立即写出微分方程的通解:

    总结一下齐次线性微分方程的解的结构:一定脱离不了这种形式的多项式:

    也即,(式10)

    由上述分析可见,基础解系的线性组合就是通解,不过令人疑惑的是,基础解系中含有虚数i,也即最终方程的解类似这样:y(t) = sin(2*t) + 5 * i * cos(8*t) +.....。这很奇怪,对于yt=f(t)这种一元非线性函数,是很容易绘制出时域曲线的,但是表达式中含有虚数i,就让人不知所措了,想象不出这条曲线到底长啥样,甚至不知道这个函数式到底能不能画出曲线。

    其实这个问题的解决方案也很简单:将基础解系,重新进行组合,消掉i就好了。从网上找来一个例子:

     

     

     

    下面再继续讲解概念:瞬态响应。

    根据(式10)可知,只要特征根的实部<0,也即传函的极点<0,那么系统在时域的自由响应一定会趋于0,我们把这种情况下的自由响应称为“瞬态响应”,需要注意的是,虽然自由响应会趋于0,但是由于总响应=自由响应+强迫响应,如果输入信号为震荡信号造成强迫响应发生震荡甚至发散的话,那么总响应也是不会趋于0的。

    只要有一个特征根的实部>0,就会造成自由响应发散,这时的自由响应就不叫“瞬态响应”了。

    “稳态响应”指的是,强迫响应。

     

    极点(特征根)的实部,正负号决定了是稳定还是发散,绝对值决定了稳定或发散的快慢;

    极点(特征根)的虚部,决定了在稳定/发散过程中震荡的周期(参见式10)

     

    按照微分方程转状态空间的步骤,可知,输出信号y(t)及其各阶导数,就是系统的状态向量。所谓系统状态的初值,就是这些状态变量在t=0时刻的值。

    零输入响应的定义:已知状态变量的初值不全为0,求输入信号为0时,系统的响应,也即先求齐次方程的通解,然后根据初值把通解中的各个c都求出来。(为何不全为0,试想,如果初值全为0,输入也为0,那就不用求输出信号了,因为输出信号肯定也是0)

    零状态响应的定义:已知状态变量的初值在t=0-时刻均为0,求给定输入信号x(t)作用下,系统的响应,也即:先求非齐次方程的通解,然后根据状态变量在t=0+时刻的初值,求出通解中的各个c。特别注意这里的t=0-和0+时刻,虽然在这两个时刻,状态变量的值都叫做初值,但是这两个时刻状态变量的值可能是不同的,也即0-时刻状态变量全为0,但0+时刻状态变量可能不是全为0,那么何种情况下0+时刻不是全0呢?那就是:当微分方程的右边含有输入信号的导数时,会引起冲激,导致状态变量不全为0。

    下面区分一下:自由响应和零输入响应

    参考:https://wenku.baidu.com/view/5d8c1f11a22d7375a417866fb84ae45c3b35c284.html

    零输入响应就是微分方程的右端为0时,微分方程的解。也即,齐次微分方程的解。该解完全取决于输出y及其y的各阶导数的初值。因为没有输入信号,所以0时刻前后的初值相同,也即:

    零状态响应就是,在t=0-时刻输出信号y及其y的各阶导数的初值均为0时,系统的输出,也即先求非齐次方程的通解,然后求出通解中的各个常数c。

    需要注意的是,因为存在输入信号,可能使得,也即,虽然在t=0-时刻,y及y的各阶导数全为0(也即所谓的0状态),但是在t=0+时刻,y及y的各阶导数就不一定全为0了,那么到底为多少呢?具体的计算可自行百度“冲激函数匹配法”,这里简单提一点,设输入信号为f(t),只要微分方程的右边出现了f(t)的导函数,不管是几阶,那么就会导致y(t)及其导数不全为0。

    自由响应指的是,输出信号y(t)中跟t=0+时刻的初状态相关的项,显然,它包含了全部的零输入响应+一部分零状态响应。

    强迫响应指的是:从零状态响应中去掉自由响应所包含的那一部分零状态响应后,剩余的部分

     

    展开全文
  • 1频率响应的基本概念详解.ppt
  • 每个波段记录的能量值与光谱响应函数有关。每个波段都对应一定的中心波长和波段宽度。由于传感器硬件的限制,传感器在某个预定波长范围内的响应不可能是100% 响应。现实中都是类似于正态分布的单峰函数。如果仅做...

    多(高)光谱传感器获取的图像具有多个波段。每个波段记录的能量值与光谱响应函数有关。每个波段都对应一定的中心波长和波段宽度。由于传感器硬件的限制,传感器在某个预定波长范围内的响应不可能是100% 响应。现实中都是类似于正态分布的单峰函数。如果仅做粗略计算,由一个中心波长和半高宽(也成半波宽)完全可以由数学公式计算出一个高斯分布曲线。这个分布曲线就叫波谱响应函数。

    波谱响应函数反映了传感器通道获取能量的情况。全色图像是单通道,波长范围是整个可见光波段。因此波谱响应函数从抽象上来说是一个很宽的曲线。 高光谱图像通道数众多,每个通道很窄,所以获取的能量较少,理论上空间分辨率比全色要低很多。

    实际上每个传感器厂商都提供了具体的光谱响应函数,一般由两列数据组成,一列数据是波长,另一列数据是相对响应强度(最大值为1)。下图列出了一些知名传感器的波谱响应函数

    展开全文
  • 1.响应式基本概念

    千次阅读 2018-07-05 21:33:25
    这里补充两个概念: * 渐进增强:先对正常的浏览器做适应,也就是让所有浏览器都兼容,然后再对可以设置CSS3等高级属性的高版本浏览器再进行优化,也就是对于高版本的浏览器,让用户体验更好一点 * 优雅降级:先...

    用电脑打开苹果或星巴克的官网,一点点缩小浏览器的窗口,你会发现,窗口虽然变小了,但不影响阅读,这就是响应式

    1.什么是响应式

    image.png
    image.png
    image.png
    image.png
    这里补充两个概念:
    * 渐进增强:先对正常的浏览器做适应,也就是让所有浏览器都兼容,然后再对可以设置CSS3等高级属性的高版本浏览器再进行优化,也就是对于高版本的浏览器,让用户体验更好一点
    * 优雅降级:先设计高版本浏览器样式,然后在根据低版本浏览器兼容性进行处理

    2.实现响应式

    image.png
    image.png
    如果用bootstrap布局的话,那就非常简单了,直接拿定义好的class名就行了,想要啥样式,就去找就行了,今天我们主要学的是CSS3**媒体查询**
    在编辑器,输入meta:vp 然后敲tab键,你会发现

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

    这样一行代码,有啥用呢

    我们发现在用浏览器打开页面,打开手机模式的时候,字体会变的很小,原因是页面宽度大于设备屏幕的宽度,所以会整体缩小,字体也就缩小了,
    image.png

    而如果加meta这一行,页面宽度等于设备宽度了,字体也变大了
    image.png

    引入媒体查询的方式
    可以放在link里

    image.png
    上述代码表示当宽度小于等于500的时候,就用CSS2里的样式覆盖css1里的,css2一定要在下面才能覆盖
    上面我们是在link标签里引入了media,但是如果判断条件很多的话,就不行了,最好的做法也是我们一般做法,在css文件里写media媒体查询,做判断

    *{
        margin: 0;
        padding: 0;
    }
    #div1{
        height: 50px;
        background: #ff0;
    }
    @media screen and ( max-width:600px){
        #div1 {
            background: #f00;
        }
    }

    上述代码表示,当屏幕宽度小于等于600px的时候,div的背景色由黄色变成红色
    * 条件外面有小括号包着
    * media里面不要忘了写选择器,别只写样式了

    orientation 设备方向
    image.png

    image.png

    • 上述代码表示,当横屏的时候,背景颜色变成粉色
    • 移动端设备方向默认是竖屏的portrait

    屏幕分辨率
    苹果4以后用视网膜屏,一像素的屏幕能显示两像素的东西,所以非常清楚

    今天先简单的了解一下,明天再接着学,困死了,宝宝要睡觉了

    展开全文
  • 零状态响应 所谓零状态响应是指系统在接收到指定输入之前处于初始状态,即保证系统是完全因为指定输入而产生的响应变化。 单位脉冲响应 单位脉冲响应是指系统对单位脉冲输入的响应。单位脉冲信号是一个无穷大的...
  • 首先感谢大家对第一篇背景介绍一文的支持,今天将对响应式Web设计的概念进行一个大概的介绍,当然这一篇也不是什么干货,只是作为一个主题来说,概念的介绍必不可少,下一篇就应该有点干货了。  从背景介绍一文中...
  • 命令式编程与响应式编程 消息驱动 观察者模式 Tomcat的NIO异步网络io 服务器推技术 Servlet3.0与3.1 本节内容 响应式系统主流框架概览 akka 使用Scala语言开发,后期支持Java,但是在Java社区并不如从前受欢迎 ...
  • 【性能概念】99线响应时间

    千次阅读 2019-09-03 20:46:23
    随着吞吐量的增大,响应时间会逐渐变长,当达到最大吞吐量之后,响应时间会开始急剧飙升,尤其是后面堆积队列中等待的请求 如果仅仅是关注平均值,由于大部分请求的响应时间还是相对较短,有一部分接口可能是10ms...
  • 狗狗 使用Bootstrap概念的简单响应式网站。 打开托管站点的链接后,必须再次刷新它才能正确查看该站点。
  •   从基本概念上来说,一个脉冲响应(Impulse Response, IR)可以定义为一个被测系统在一个脉冲激励信号输入时,所得到的时域(时间-幅度)的响应特性。这里所指的被测“系统”,可以小至一支麦克风、一个扬声器...
  • 主要介绍了吞吐量(TPS)、QPS、并发数、响应时间(RT)概念,在开发中需要先搞懂这些基础知识,才能更好运用,需要的朋友可以参考下
  • 抢占优先级和响应优先级 STM32 的中断向量具有两个属性,一个为抢占属性,另一个为响应属性, 其属性编号越小,表明它的优先级别越高。 抢占,是指打断其它中断的属性,即因为具有这个属性,会出现嵌套中断 (在...
  • 零输入响应与零状态响应响应

    万次阅读 2020-07-13 02:08:53
    零输入响应与零状态响应零输入响应与零状态响应1、 零输入响应2、零状态响应3、两种响应的区别4、...因此我个人认为,在认识到零输入响应与零状态响应概念以及计算之前,需要提前有数学(微积分求解方法、齐次方程与
  • 响应式编程的首要问题 - 不好调试 我们在分析传统代码的时候,在哪里打了断点,就能看到直观的调用堆栈,来搞清楚,谁调用了这个代码,之前对参数做了什么修改,等等。但是在响应式编程中,这个问题就很麻烦。来看...
  • 吞吐量(TPS)、QPS、并发数、响应时间(RT)的概念讲解
  • 因为这两种类型之间的简单区别,我们可以很容易地区分响应式API的类型:从返回的类型我们就可以知道一个方法会“发射并忘记”或“请求并等待”(Mono),还是在处理一个包含多个数据项的流(Flux)。 Flux和Mono的...
  • 以信息通道的写读脉冲响应概念为基础,建立了光盘数据存储系统的模型,得到了脉冲响应函数和频率传递函数,分析了光学头的伺服误差和像差对读出过程的影响.
  • react-redux-cheatsheet, 关于工作流&概念,请响应 Redux Cheat react-redux-cheatsheet版本 Cheatsheet: 1.1.0版本文章:1.2.0概述这里存储库包含了两个解决方案中的工作流和概念的图形备忘单: 1440px 和 3840像素...
  • 准备,和响应抵制网络攻击的概念模型 概述 概念模型背后的思想是代表组织防御现代网络攻击的综合模型。 模型“ PREPARE,HUNT和RESPOND”将从最初的版本发展到涵盖每个部分的更详细的信息以及工具和技术的案例示例。...
  • 1. 响应时间(RT) 响应时间是指系统对请求作出响应的时间。直观上看,这个指标与人对软件性能的主观感受是非常一致的,因为它完整地记录了整个计算机系统处理请求的时间。由于一个系统通常会提供许多功能,而不同...
  • 了解吞吐量(TPS),QPS,并发数,响应时间(RT)概念1.响应时间(RT)响应时间是指系统对请求做出响应的时间. 直观上看,这个指标与人对软件性能的主观感受是非常一致的,因为它完整的记录了整个计算机系统处理请求的时间...
  • 你可以轻易找到许多如何设置响应式设计响应点的攻略,但是这些过时的设计方法都是以主流屏幕尺寸为依据的,效果并不理想。其实并没有“主流”屏幕尺寸这一概念。另外一个主流的方法是当布局被打破时设置响应点。这个...
  • 1,HTTP请求的基本概念 TCP/UPD/HTTP *2,HTTP请求头和响应头的含义 请求头: Accept: text/html,image/*(浏览器可以接收的类型) Accept-Charset: ISO-8859-1(浏览器可以接收的编码类型) Accept-Encoding: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 446,048
精华内容 178,419
关键字:

响应的概念