精华内容
下载资源
问答
  • 到底什么样的设计才是响应式设计

    千次阅读 2016-02-26 11:47:08
    出现的背景有两个原因:一是屏幕设备的尺寸繁多,针对移动端和PC端只少需要两套页面;二是CSS3的Media Queries的出现,使得CSS3可以探测到浏览器可视区的宽度。...于是响应式设计诞生了。...响应式设计

    出现的背景

    有两个原因:

    一是屏幕设备的尺寸繁多,针对移动端PC端只少需要两套页面;

    二是CSS3的Media Queries的出现,使得CSS3可以探测到浏览器可视区的宽度。

    于是Ethan Marcotte就想了,能不能只使用一套HTML结构,然后利用CSS3的Media Queries针对不同的屏幕使用不同的CSS呢。

    于是响应式设计诞生了。

    来一段响应式代码记念一下:

    # HTML
    <h1>响应式设计</h1>
    
    # CSS
    @media screen and (max-width: 600px) { 
        /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
        h1 {
            font-size: 12px;
        }
    }
    @media screen and (max-width: 900px) { 
        /*当屏幕尺寸小于900px时,应用下面的CSS样式*/
        h1 {
            font-size: 14px;
        }
    }
    @media screen and (min-width: 900px) { 
        /*当屏幕尺寸大于900px时,应用下面的CSS样式*/
        h1 {
            font-size: 18px;
        }
    }
    

    响应式设计的好处

    众人说,设计师只需要一套设计,开发人员只需要开发一套代码。
    所以,好处就是工作量的减少!

    工作量会减少????

    对于设计师来说,工作量绝对等于原来的50%,因为原来需要设计两套,现在只需要设计一套了;
    对于开发人员来说,就不能太任性了,HTML结构要写得尽量易于多个布局,CSS在原来PC端的基础上加上响应式(Media Queries)的部分,所以工作量也许是原来的???

    然而,有一个条件,那就是设计是真正的响应式设计!!!因为响应式指的仅仅是CSS的响应式,HTML是不变的,而CSS不是万能的(百能都不是),针对特定的HTML结构,如果要布局出完全不同的样子,不说能不能做到,就算能做到,代码量也一定比原来的PC+移动多。

    所以,工作量取决于响应式设计的可能性和难易程度。

    所以,响应式是有限制的,限制在那些瀑布式成局中,限制在液态类型的网站中。

    更严重的是,大多数设计压根就不是响应式设计。

    如果有人说一个不懂HTML/CSS3的设计师能设计出响应式的设计,我愿意把我的膝盖跪碎。

    所以,开发人员郁闷了,连带设计师也郁闷了。

    所以,阿里分出了PC端和无线端,大家各干各的。

    响应式设计的问题

    响应式已经变成了一种噱头,脱离了响应式合理的使用场景,滥用成灾。

    为了响应式肆意隐藏网页内容,在PC端能找到的在移动端找不到了,如果你是用户你什么感觉?

    还有一些不太重要的问题:

    • HTML/CSS文件增大,不利于移动端的加载;
    • PC端和移动端的交互不同;
    • 一套HTML,不好分别针对搜索引擎做SEO;
    • 布局是液态的,布局的复杂度增加,要折腾;

    如果看了移动端的Web App,如果看了jQuery Mobile的样子,就会知道响应式设计根本不是为了取代移动端的网页,因为差别太大了,实现太困难了。

    响应式设计是为了更好的体验,为了更好的体验,可能会对PC端和移动端分别设计。所以,网站适合用响应式设计的时候才去使用它。

    响应式的未来

    我并不是黑响应式设计,相反,我相信尽管响应式设计有种种问题,但在以阅读为主、交互少、页面布局简单的网站中仍是最佳选择。


    好了,该回到正题了,上面的所有内容都是瞎扯淡的,是热身,写这篇文章的目的是为了弄清楚到底什么样的设计才是响应式设计。下面是正文。

    到底什么样的设计才是响应式设计呢?I Don’t Know.

    展开全文
  • 文件在线预览HTTP响应头设置

    千次阅读 2019-07-10 14:56:39
    响应中,Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找,并不一定遵循此标题的值; 为了防止这种行为,可以将标题X-Content-Type-Options设置为nosniff。 在请求中 (如...

    1、Content-Type

    Content-Type 实体头部用于指示资源的MIME类型 media type 。

    在响应中,Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找,并不一定遵循此标题的值; 为了防止这种行为,可以将标题 X-Content-Type-Options 设置为 nosniff

    在请求中 (如POST 或 PUT),客户端告诉服务器实际发送的数据类型。

    Header type Entity header
    Forbidden header name no
    CORS-safelisted response-header yes

    句法

    Content-Type: text/html; charset=utf-8
    Content-Type: multipart/form-data; boundary=something
    

    指令

    media-type

    资源或数据的 MIME type 。

    charset

    字符编码标准。

    boundary

    对于多部分实体,boundary 是必需的,其包括来自一组字符的1到70个字符,已知通过电子邮件网关是非常健壮的,而不是以空白结尾。它用于封装消息的多个部分的边界。

    例子

    Content-Type 在HTML表单中

    在通过HTML form提交生成的POST请求中,请求头的Content-Type由<form>元素上的enctype属性指定

    <form action="/" method="post" enctype="multipart/form-data">
      <input type="text" name="description" value="some text">
      <input type="file" name="myFile">
      <button type="submit">Submit</button>
    </form>

    请求头看起来像这样(在这里省略了一些 headers):

    POST /foo HTTP/1.1
    Content-Length: 68137
    Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
    
    ---------------------------974767299852498929531610575
    Content-Disposition: form-data; name="description" 
    
    some text
    ---------------------------974767299852498929531610575
    Content-Disposition: form-data; name="myFile"; filename="foo.txt" 
    Content-Type: text/plain 
    
    (content of the uploaded file foo.txt)
    ---------------------------974767299852498929531610575

    常用的MIME类型:http://www.iana.org/assignments/media-types/media-types.xhtml 

     

    2、Content-Disposition

    在常规的HTTP应答中,Content-Disposition 消息头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。

     

    在multipart/form-data类型的应答消息体中, Content-Disposition 消息头可以被用在multipart消息体的子部分中,用来给出其对应字段的相关信息。各个子部分由在Content-Type中定义的分隔符分隔。用在消息体自身则无实际意义。

    Content-Disposition消息头最初是在MIME标准中定义的,HTTP表单及POST 请求只用到了其所有参数的一个子集。只有form-data以及可选的namefilename三个参数可以应用在HTTP场景中。

    Header type Response header (for the main body)
    General header (for a subpart of a multipart body)
    Forbidden header name no

    语法

    作为消息主体中的消息头

    在HTTP场景中,第一个参数或者是inline(默认值,表示回复中的消息体会以页面的一部分或者整个页面的形式展示),或者是attachment(意味着消息体应该被下载到本地;大多数浏览器会呈现一个“保存为”的对话框,将filename的值预填为下载后的文件名,假如它存在的话)。

    Content-Disposition: inline
    Content-Disposition: attachment
    Content-Disposition: attachment; filename="filename.jpg"

    作为multipart body中的消息头

    在HTTP场景中。第一个参数总是固定不变的form-data;附加的参数不区分大小写,并且拥有参数值,参数名与参数值用等号(=)连接,参数值用双引号括起来。参数之间用分号(;)分隔。

    Content-Disposition: form-data
    Content-Disposition: form-data; name="fieldName"
    Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

    指令

    name

    后面是一个表单字段名的字符串,每一个字段名会对应一个子部分。在同一个字段名对应多个文件的情况下(例如,带有multiple 属性的<input type=file>元素),则多个子部分共用同一个字段名。如果name参数的值为 '_charset_' ,意味着这个子部分表示的不是一个HTML字段,而是在未明确指定字符集信息的情况下各部分使用的默认字符集。

    filename

    后面是要传送的文件的初始名称的字符串。这个参数总是可选的,而且不能盲目使用:路径信息必须舍掉,同时要进行一定的转换以符合服务器文件系统规则。这个参数主要用来提供展示性信息。当与 Content-Disposition: attachment 一同使用的时候,它被用作"保存为"对话框中呈现给用户的默认文件名。

    filename*

    "filename" 和 "filename*" 两个参数的唯一区别在于,"filename*"采用了  RFC 5987 中规定的编码方式。当"filename" 和 "filename*" 同时出现的时候,应该优先采用"filename*",假如二者都支持的话。

    示例

    以下是一则可以触发"保存为"对话框的服务器应答:

    200 OK
    Content-Type: text/html; charset=utf-8
    Content-Disposition: attachment; filename="cool.html"
    Content-Length: 22
    
    <HTML>Save me!</HTML>

    这个简单的HTML文件会被下载到本地而不是在浏览器中展示。大多数浏览器默认会建议将cool.html作为文件名。

    以下是一个HTML表单的示例,展示了在 multipart/form-data format 格式的报文中使用Content-Disposition 消息头的情况:

    POST /test.html HTTP/1.1
    Host: example.org
    Content-Type: multipart/form-data;boundary="boundary"
    
    --boundary
    Content-Disposition: form-data; name="field1"
    
    value1
    --boundary
    Content-Disposition: form-data; name="field2"; filename="example.txt"
    
    value2
    --boundary--

    参考文档:

            [MDN web docs] https://developer.mozilla.org/zh-CN/docs/Web/HTTP

    展开全文
  • 阿里云centos 用xshell自带的xftp 替换几个.class编译文件或者.xml配置文件 服务器上文件已经替换但是接口还是老样子 返回的字段仍然没有变 网站后台没有任何变化 如果替换整个class文件夹服务器才会真正改变过来...
  • Global.asax 文件什么

    千次阅读 2018-06-13 16:23:44
    Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法。你可以使用这个文件实现应用程序安全性以及其它一些任务。下面让我们详细看一下如何在应用程序...

    Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法。你可以使用这个文件实现应用程序安全性以及其它一些任务。下面让我们详细看一下如何在应用程序开发工作中使用这个文件。

    概述

       Global.asax 位于应用程序根目录下。虽然 Visual Studio .NET 会自动插入这个文件到所有的 ASP.NET 项目中,但是它实际上是一个可选文件。删除它不会出问题——当然是在你没有使用它的情况下。.asax 文件扩展名指出它是一个应用程序文件,而不是一个使用 aspx 的 ASP.NET 文件。

     

       Global.asax 文件被配置为任何(通过 URL 的)直接 HTTP 请求都被自动拒绝,所以用户不能下载或查看其内容。ASP.NET 页面框架能够自动识别出对Global.asax 文件所做的任何更改。在 Global.asax 被更改后ASP.NET 页面框架会重新启动应用程序,包括关闭所有的浏览器会话,去除所有状态信息,并重新启动应用程序域。

    编程

       Global.asax 文件继承自HttpApplication 类,它维护一个HttpApplication 对象池,并在需要时将对象池中的对象分配给应用程序。Global.asax 文件包含以下事件:

    ·         Application_Init:在应用程序被实例化或第一次被调用时,该事件被触发。对于所有的HttpApplication 对象实例,它都会被调用。

    ·         Application_Disposed:在应用程序被销毁之前触发。这是清除以前所用资源的理想位置。

    ·         Application_Error:当应用程序中遇到一个未处理的异常时,该事件被触发

    ·         Application_Start:在HttpApplication 类的第一个实例被创建时,该事件被触发。它允许你创建可以由所有HttpApplication 实例访问的对象。

    ·         Application_End:在HttpApplication 类的最后一个实例被销毁时,该事件被触发。在一个应用程序的生命周期内它只被触发一次。

    ·         Application_BeginRequest:在接收到一个应用程序请求时触发。对于一个请求来说,它是第一个被触发的事件,请求一般是用户输入的一个页面请求(URL)。

    ·         Application_EndRequest:针对应用程序请求的最后一个事件。

    ·         Application_PreRequestHandlerExecute:在 ASP.NET 页面框架开始执行诸如页面或 Web 服务之类的事件处理程序之前,该事件被触发。

    ·         Application_PostRequestHandlerExecute:在 ASP.NET 页面框架结束执行一个事件处理程序时,该事件被触发。

    ·         Applcation_PreSendRequestHeaders:在 ASP.NET 页面框架发送 HTTP 头给请求客户(浏览器)时,该事件被触发。

    ·         Application_PreSendContent:在 ASP.NET 页面框架发送内容给请求客户(浏览器)时,该事件被触发。

    ·         Application_AcquireRequestState:在 ASP.NET 页面框架得到与当前请求相关的当前状态(Session 状态)时,该事件被触发。

    ·         Application_ReleaseRequestState:在 ASP.NET 页面框架执行完所有的事件处理程序时,该事件被触发。这将导致所有的状态模块保存它们当前的状态数据。

    ·         Application_ResolveRequestCache:在 ASP.NET 页面框架完成一个授权请求时,该事件被触发。它允许缓存模块从缓存中为请求提供服务,从而绕过事件处理程序的执行。

    ·         Application_UpdateRequestCache:在 ASP.NET 页面框架完成事件处理程序的执行时,该事件被触发,从而使缓存模块存储响应数据,以供响应后续的请求时使用。

    ·         Application_AuthenticateRequest:在安全模块建立起当前用户的有效的身份时,该事件被触发。在这个时候,用户的凭据将会被验证。

    ·         Application_AuthorizeRequest:当安全模块确认一个用户可以访问资源之后,该事件被触发。

    ·         Session_Start:在一个新用户访问应用程序 Web 站点时,该事件被触发。

    ·         Session_End:在一个用户的会话超时、结束或他们离开应用程序 Web 站点时,该事件被触发。

    这个事件列表看起来好像多得吓人,但是在不同环境下这些事件可能会非常有用。

     

    使用这些事件的一个关键问题是知道它们被触发的顺序。Application_Init 和Application_Start 事件在应用程序第一次启动时被触发一次。相似地,Application_Disposed 和 Application_End 事件在应用程序终止时被触发一次。此外,基于会话的事件(Session_Start 和 Session_End)只在用户进入和离开站点时被使用。其余的事件则处理应用程序请求,这些事件被触发的顺序是:

    ·         Application_BeginRequest

    ·         Application_AuthenticateRequest

    ·         Application_AuthorizeRequest

    ·         Application_ResolveRequestCache

    ·         Application_AcquireRequestState

    ·         Application_PreRequestHandlerExecute

    ·         Application_PreSendRequestHeaders

    ·         Application_PreSendRequestContent

    ·         <<执行代码>>

    ·         Application_PostRequestHandlerExecute

    ·         Application_ReleaseRequestState

    ·         Application_UpdateRequestCache

    ·         Application_EndRequest

    这些事件常被用于安全性方面。下面这个 C# 的例子演示了不同的Global.asax 事件,该例使用Application_Authenticate 事件来完成通过 cookie 的基于表单(form)的身份验证。此外,Application_Start 事件填充一个应用程序变量,而Session_Start 填充一个会话变量。Application_Error 事件显示一个简单的消息用以说明发生的错误。

    protected void Application_Start(Object sender, EventArgs e) {
    Application["Title"] = "Builder.com Sample";
    }
    protected void Session_Start(Object sender, EventArgs e) {
    Session["startValue"] = 0;
    }
    protected void Application_AuthenticateRequest(Object sender, EventArgs e) {
    // Extract the forms authentication cookie
    string cookieName = FormsAuthentication.FormsCookieName;
    HttpCookie authCookie = Context.Request.Cookies[cookieName];
    if(null == authCookie) {
    // There is no authentication cookie.
    return;
    }
    FormsAuthenticationTicket authTicket = null;
    try {
    authTicket = FormsAuthentication.Decrypt(authCookie.Value);
    } catch(Exception ex) {
    // Log exception details (omitted for simplicity)
    return;
    }
    if (null == authTicket) {
    // Cookie failed to decrypt.
    return;
    }
    // When the ticket was created, the UserData property was assigned
    // a pipe delimited string of role names.
    string[2] roles
    roles[0] = "One"
    roles[1] = "Two"
    // Create an Identity object
    FormsIdentity id = new FormsIdentity( authTicket );
    // This principal will flow throughout the request.
    GenericPrincipal principal = new GenericPrincipal(id, roles);
    // Attach the new principal object to the current HttpContext object
    Context.User = principal;
    }
    protected void Application_Error(Object sender, EventArgs e) {
    Response.Write("Error encountered.");
    }

     

    这个例子只是很简单地使用了一些Global.asax 文件中的事件;重要的是要意识到这些事件是与整个应用程序相关的。这样,所有放在其中的方法都会通过应用程序的代码被提供,这就是它的名字为Global 的原因。

    资源

    Global.asax 文件是 ASP.NET 应用程序的中心点。它提供无数的事件来处理不同的应用程序级任务,比如用户身份验证、应用程序启动以及处理用户会话等。你应该熟悉这个可选文件,这样就可以构建出健壮的ASP.NET 应用程序。

     

    附:*.ascx *.asax *.aspx.resx *.asax.resx是什么文件

    sln:解决方案文件,为解决方案资源管理器提供显示管理文件的图形接口所需的信息。 
    .csproj:项目文件,创建应用程序所需的引用、数据连接、文件夹和文件的信息。 
    .aspx:Web 窗体页由两部分组成:视觉元素(HTML、服务器控件和静态文本)和该页的编程逻辑。Visual Studio 将这两个组成部分分别存储在一个单独的文件中。视觉元素在.aspx 文件中创建。 
    .aspx.cs:Web 窗体页的编程逻辑位于一个单独的类文件中,该文件称作代码隐藏类文件(.aspx.cs)。 
    .cs: 类模块代码文件。业务逻辑处理层的代码。 
    .asax:Global.asax 文件(也叫做 ASP.NET 应用程序文件)是一个可选的文件,该文件包含响应 ASP.NET 或 HTTP 模块引发的应用程序级别事件的代码。 
    .config:Web.config 文件向它们所在的目录和所有子目录提供配置信息。 
    .aspx.resx/.resx:资源文件,资源是在逻辑上由应用程序部署的任何非可执行数据。通过在资源文件中存储数据,无需重新编译整个应用程序即可更改数据。 
    .XSD:XML schema的一种.从DTD,XDR发展到XSD 
    .pdb:PDB(程序数据库)文件保持着调试和项目状态信息,从而可以对程序的调试配置进行增量链接。 
    .suo:解决方案用户选项,记录所有将与解决方案建立关联的选项,以便在每次打开时,它都包含您所做的自定义设置。 
    .asmx:asmx 文件包含 WebService 处理指令,并用作 XML Web services 的可寻址入口点 
    .vsdisco(项目发现)文件 基于 XML 的文件,它包含为 Web 服务提供发现信息的资源的链接 (URL)。 
    .htc:一个HTML文件,包含脚本和定义组件的一系列HTC特定元素.htc提供在脚本中implement组件的机制 

    .ascx 是用户控件代码文件
    .aspx webform html脚本文件
    .cs 是c#类文件)
    .vb 是vb类文件)
    .aspx.cs 和你的webform相关的后台c#代码文件,其实跟.cs是一样的
    .aspx.vb 和你的webform相关的后台VB代码文件,其实跟.vb是一样的
    web.config 配置文件
    .xml xml文件
    .css 样式表文件

    展开全文
  • 什么是响应式Web设计?怎样进行?

    千次阅读 2016-07-26 12:27:40
    开 始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得...准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题,包括概念、实践方式、案例及...

    开 始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡。话说两年前也是在国庆假期里开始 做Joomla文档翻译的;长假好时光,总会可以抽出一两天,安静的窝在家里做做博客、学做些新东西,简直没有比这更舒心的事情。

     

    说正事 儿。准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章 篇幅要长的多(甚至要加分页了!...),今天放上的这篇几乎花掉了两天的“闲暇时间”;对耐力是个考验,努力提高喽。废话结束,here we go.

    眼 下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐,就是为iPhone、iPad、黑莓、Kindle...各自打造一款 ——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面?这种疯狂什么时候算个头?

     

    在 Web设计和开发领域,很快的,我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说,为每种新设备及分辨率创建其独立的版本根本就是不切实际的; 结果就是,我们将会赢得使用某些设备的用户群,而失去那些使用其他设备的用户。不过,或许会有另外一种方式,可以帮助我们避免这种情况的发生。

     

    响 应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方 面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说, 页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了

     

    响应式Web设计的概念

    Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”,文中援引了响应式建筑设计的概念:

    最 近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝 试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产 “智能玻璃”:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。

    将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。

    显 然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。好在,一些相关的概念已经得到了实践,比如液态布局、帮助页面 重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。

     

    调整分辨率

    不 同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式,不断被研发着的各种新设备也将带来新的屏幕尺寸规格。有些设备基于竖屏 (portrait),有些是横屏(landscape),甚至还有正方形;对于日益流行的iPhone、iPad及其他一些智能手机、平板电脑,用户还 可以通过转动设备来任意切换屏幕的定向方式。怎样才能做到让一种设计方案满足所有情况?

    什么是响应式Web设计?怎样进行?

    要 想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个大类,然后为 每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是无比焦虑的,谁知道某类设备在5年之后的占有率是多少?而且很多用户甚至不去将浏览器的窗口最大化;类似这样的变数,我们还要考虑多少呢?

     

    Morten Hjerde和他的同事们对2005至2008年市场中的400余种移动设备进行了统计(查看报告),下图展示了大致的统计结果:

    什么是响应式Web设计?怎样进行?

    在08年之后,更多更有代表性的新设备问世并普及了。显然,我们不可以沿着“多方案”的思路继续走下去;那么我们应该怎样做呢?

     

    部分解决方案:一切弹性化

    几 年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很 极端的情况下,仍会破坏布局。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等移动设备了。

    现在,我们可以通过响应式的设计和开发思路让页面更加“弹性”了。图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。

     

    在前文提到的Ethan Marcotte的文章中,他通过一个实例展示了响应式Web设计在页面弹性方面的特性:

    什么是响应式Web设计?怎样进行?

    该实例的实现方式完美的结合了液态网格液态图片技术,并且聪明的在正确的地方使用了正确的HTML标记。“液态网格”是一种很常见的实践方式;对于“液态图片”技术,下面的文章做了不错的介绍:

    说到创建液态页面,最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》,或是下载个样章先:“怎样创建弹性图片”。另外,Zoe的这篇“Essential Resources for Creating Liquid and Elastic Layouts.”提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。

    从技术角度讲,虽然听上去这些都简单可行,但它比“将这些功能结合在一起”要复杂些。举个例子,仔细观察Ethan Marcotte提供的实例中的logo图片:

    什么是响应式Web设计?怎样进行?

    如果我们将浏览器窗口不断调小,会发现logo图片的文字部分始终会保持同比缩小,保证其完整可读,而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分:插图作为页面标题的背景图片,会保持尺寸,但会随着布局调整而被裁切;文字部分则是一张单独的图片。

    <h1 id="logo">
      <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a>
    </h1>

     

    其中,<h1>元素使用插图作为背景,文字部分的图片始终保持与背景的对齐

    这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短,并且logo文字最终会变的小到难以识别,背景图片也会被过多的裁切。

     

    弹性图片

    响 应式Web设计的思路中,一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术,其中有不少是简单易行的。其中,由Richard Rutter最先尝试的一种做法比较流行,即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。

    img { max-width: 100%;}

     

    只 要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其容器可视部分的宽度小于图片的原始宽度。上面的 代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片的最大宽度值也会相应的减小,图片本身 永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的,“液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。” 一种简而美的方法。

     

    图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。

     

    响应式图片

    由Filament Group提出的“响应式图片”技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下demo页面先。

    什么是响应式Web设计?怎样进行?

    这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。 大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚 本和样式表加载请求定向到一个虚拟路径“/rwd-router”。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是 小尺寸的“响应式图片”,并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。

    这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。

     

    禁用iPhone中的图片自动缩放

    在 iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这 里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示。

    什么是响应式Web设计?怎样进行?

    我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的相关文章):

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

     

    将initial-scale的值设定为“1”,即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹果官方的文档

     

    打造布局结构

    当 页面所需要适应的不同设备的屏幕尺寸差异过大时,除了图片方面,我们也应该考虑到整个布局结构的响应式调整;我们可以使用独立的样式表,或者更有 效的,使用CSS media query。这不会引起多大的麻烦,多数样式设定不会被影响和改变,只有一些特定的元素会通过浮动、宽度和高度等的设置来改变位置。

    我们可以使用一个默认主样式表来定义页面的主要结构元素,比如#wrapper、#content、#sidebar、#nav等的默认布局方式,以及一些全局性的配色和字体方案。

     

    我们可以监测页面布局随着不同的浏览环境而产生的变化,如果它们变的过窄过短或是过宽过长,则通过一个子级样式表来继承主样式表的设定,并专门针对某些布局结构进行样式覆写。我们来看下代码示例:

    下面的代码可以放在默认主样式表style.css中:

    /* Default styles that will carry to the child style sheet */
     
    html,body{
       background...
       font...
       color...
    }
     
    h1,h2,h3{}
    p, blockquote, pre, code, ol, ul{}
     
    /* Structural elements */
    #wrapper{
        width: 80%;
        margin: 0 auto;
     
        background: #fff;
        padding: 20px;
    }
     
    #content{
        width: 54%;
        float: left;
        margin-right: 3%;
    }
     
    #sidebar-left{
        width: 20%;
        float: left;
        margin-right: 3%;
    }
     
    #sidebar-right{
        width: 20%;
        float: left;
    }

     

    下面的代码可以放在子级样式表mobile.css中,专门针对移动设备进行样式覆写:

    #wrapper{
        width: 90%;
    }
     
    #content{
        width: 100%;
    }
     
    #sidebar-left{
        width: 100%;
        clear: both;
     
        /* Additional styling for our new layout */
        border-top: 1px solid #ccc;
        margin-top: 20px;
    }
     
    #sidebar-right{
        width: 100%;
        clear: both;
     
        /* Additional styling for our new layout */
        border-top: 1px solid #ccc;
        margin-top: 20px;
    }

     

    大致的视觉效果如下图所示:

    什么是响应式Web设计?怎样进行?

    Media Queries

    CSS3 支持CSS2.1所支持的所有媒体类型,例如screen、print、handheld等,同时添加了很多涉及媒体类型的功能属性,包括 max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向,横屏或竖屏)和color。在CSS3发布 之后出现的新玩具,如iPad或Android相关设备,都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式,而忽略那些不支持CSS3的台式机中的旧浏览器

    在Ethan的文章中,我们能看到一段media query使用实例:

    <link rel="stylesheet" type="text/css"
        media="screen and (max-device-width: 480px)"
        href="shetland.css" />

     

    代码本身可以很好的说明工作机制:如果页面通过屏幕呈现(非打印一类),并且屏幕宽度不超过480px,则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息,可以参考“The Orientation Media Query”一文。

     

    我们可以创建多个样式表,以适应不同设备类型的宽度范围。Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是,将多个media queries整合在一个样式表文件中:

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }
     
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
     
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

     

    面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式,与通过media queries调用不同样式表的方式之间的区别与联系,可以参考“Hardboiled CSS3 Media Queries”一文。

     

    CSS3 Media Queries

    上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值,不久的将来则一定会全部派上用场。

    min-widthmax-width这两个属性很靠谱。通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之。

     

    下面的几个示例中,我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述,这样做更加高效,减少请求数量。

    @media screen and (min-width: 600px) {
         .hereIsMyClass {
              width: 30%;
              float: right;
         }
    }

     

    上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。

    @media screen and (max-width: 600px) {
         .aClassforSmallScreens {
              clear: both;
              font-size: 1.3em;
         }
    }

     

    而这段代码的作用则相反:aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。

    可 以看出 min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候,我们希望通过media queries作用于某种特定的设备,而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时,我们需要使用min-device-widthmax-device-width,用来判断设备本身的屏幕尺寸。

    @media screen and (max-device-width: 480px) {
         .classForiPhoneDisplay {
              font-size: 1.2em;
         }
    }

     

    @media screen and (min-device-width: 768px) {
         .minimumiPadWidth {
              clear: both;
              margin-bottom: 2px solid #ccc;
         }
    }

     还有一些其他方法,可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章:

    对于iPad来说,orientation属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。

    @media screen and (orientation: landscape) {
         .iPadLandscape {
              width: 30%;
              float: right;
         }
    }

     

    @media screen and (orientation: portrait) {
         .iPadPortrait {
              clear: both;
         }
    }

     不幸的是,这个属性目前确实只在iPad上有效。对于其他可以转屏的设备,譬如iPhone,可以使用min-device-width和max-device-width来变通实现;详情可以参考“Determine iPhone orientation using CSS”一文。

    我们还可以将上述属性组合使用,来锁定某个屏幕尺寸范围:

    @media screen and (min-width: 800px) and (max-width: 1200px) {
         .classForaMediumScreen {
              background: #cc0000;
              width: 30%;
              float: right;
         }
    }

     

    上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。

    其实,很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发,其益处确实高于效率的损耗的话,那么这样做也完全不坏:

    <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
    <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
    <link rel="stylesheet" media="print" href="print.css" />

     

    所 以呐,凡事没有绝对,最好根据实际情况决定使用media queries的方式。比如,对于iPad,我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向,这种情况下,要保证页面在极短的时间内响应屏幕尺寸的调整,我们必须选择 效率最高的方式。

     

    JavaScript

    JavaScript也是我们的武器之一,特别是当某些旧设备无法完美支持 CSS3的media query时,它可以作为后备支援。幸运的是,已经有专门的JS库来帮助旧浏览器(IE 5+,Firefox 1+,Safari 2等)支持CSS3的media queries。使用方法很简单,下载css3-mediaqueries.js并在你的页面中调用它。

    而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度,并为不同的情况调用不同的样式表:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
     
    <script type="text/javascript">
        $(document).ready(function(){
            $(window).bind("resize", resizeWindow);
            function resizeWindow(e){
                var newWindowWidth = $(window).width();
     
                // If width width is below 600px, switch to the mobile stylesheet
                if(newWindowWidth < 600){                $("link[rel=stylesheet]").attr({href : "mobile.css"});              }           // Else if width is above 600px, switch to the large stylesheet             else if(newWindowWidth > 600){
                    $("link[rel=stylesheet]").attr({href : "style.css"});
                }
            }
        });
    </script>

     

    类似这样的解决方案还有很多。所以我们要清楚,media queries不是一个绝对唯一的答案,它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript,我们则可以实现更多的变化。这篇“Combining Media Queries and JavaScript”向我们展示了JavaScript配合media queries的更多细节信息。

     

    显示或隐藏内容

    通 过前文的学习,我们已经了解到,对于响应式Web设计,同比例缩减元素尺寸以及调整页面结构布局,是两个重要的方式方法。但是对于页面中的文字内 容信息来说,则不能简单的只从“同比缩小”和“调整布局结构”这两方面去处理。对于手机等移动设备来说,在文字内容方面,已经有了很多最佳实践方式和指导 原则:简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

    什么是响应式Web设计?怎样进行?

    响应式Web设计的思想,一方面要保证页面元素及布局具有足够的弹性,来兼容各类设备平台和屏幕尺寸;另一方面,则是增强可读性和易用性,帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。

    有一条样式代码,我们已经使用了多年:

    display: none;

     

    我 们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素,也可以使用前文的方法,通过JS判断当前硬件屏幕规格,在小屏幕 设备的情况下直接为需要隐藏的元素添加工具类class。比如,对于手机类设备,我们可以隐藏掉大块的文字内容区,而只显示一个简单的导航结构,其中的导 航元素可以指向详细内容页面

     

    注意,不要使用visibility: hidden的方式,因为这只能使元素在视觉上不做呈现;display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说,避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例:

    什么是响应式Web设计?怎样进行?

    图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:

    <p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>
     
    <div id="content">
        <h2>Main Content</h2>
    </div>
     
    <div id="sidebar-left">
        <h2>A Left Sidebar</h2>
     
    </div>
     
    <div id="sidebar-right">
        <h2>A Right Sidebar</h2>
    </div>

     

    下面是默认的主样式表,其中,我们要隐藏掉链接导航部分(sidebar-nav),因为默认样式适用的设备屏幕会足够大,足够显示包括两个侧边栏在内的所有内容。

    #content{
        width: 54%;
        float: left;
        margin-right: 3%;
    }
     
    #sidebar-left{
        width: 20%;
        float: left;
        margin-right: 3%;
    }
     
    #sidebar-right{
        width: 20%;
        float: left;
    }
    .sidebar-nav{display: none;}

     

    下面是用于小屏幕移动设备的样式表代码。现在,我们要隐藏掉两个侧边栏,并 使sidebar-nav显示出来。借助JavaScript,当用户点击 sidebar-nav中的链接时,对应的侧边栏可以恢复显示。当然,触发恢复显示的方式有很多种,即可以通过JS改变侧边栏的display属性值,也 可以为其添加额外的布局样式。

    #content{
        width: 100%;
    }
     
    #sidebar-left{
        display: none;
    }
     
    #sidebar-right{
        display: none;
    }
    .sidebar-nav{display: inline;}

     

    现在,我们的页面已经可以随着设备和屏幕规格的变更,响应式的做到元素 的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备,我们还要 在实践过程中注意一些该类设备共有的设计指导原则。比如,针对手机设备,使用一个特定的样式,将页面原有的文字导航元素变为更易操作的图标形式。下面的一 些文章资源可作参考阅读:

     

    触屏与鼠标

    触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品,比如手机,但是市场上越来越多的大屏幕设备也开始使用触屏技术;且不说iPad一类的平板电脑,就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t,即使用传统的键鼠设备,同时也加入了触屏技术。

    什么是响应式Web设计?怎样进行?

    相 比于传统的基于鼠标指针的互动,触屏技术显然带来了截然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。所幸,要使我们的设计方案同时满足这 两类设备的规范,并非一件难事,只是有些地方需要注意。比如,触屏设备无法反映CSS定义的hover行为及相应的样式,因为它没有鼠标指针的概念,手指 点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。

     

    有兴趣的话,可以读读这篇“Designing for Touchscreen”, 这里提到的很多建议即有利于改进针对触屏设备的设计方式,同时也不会削弱传统键鼠设备上的用户体验。比如,放在页面右侧的导航列表可以对触屏设备的用户更 加友好。因为多数人习惯用右手点击操作,而左手负责握住设备;这样,放在右侧的导航列表即方便右手的点击,又可以避免被握着设备的左手不小心触碰到。而这 一点与键鼠设备用户的习惯完全不矛盾。

    本文来自Be For Web
    译者信息: C7210 - 交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX(上海)
     

    本文转自: 什么是响应式Web设计?怎样进行?

     

     

     

     

     

     

    展开全文
  • 作为全球先进的科技巨头,Google一直推崇响应式网页设计,并在今年的4月21日发布了重大的更新,目的是提高响应式在移动终端上的运行效率。尽管在更新中没有明确表明你必须使用响应式设计。只是简单的提示响应式设计...
  • ashx文件是.net 2.0新加的文件类型(其实在.net 1.0下已经可用,但是没有公开提供).ashx文件和aspx文件什么不同? 我们先新建一个ashx文件看看: ashx@ WebHandler Language="C#" Class="Handler" %>using System;...
  • 之前做数据库相关题目的时候,被一道有关转储文件的题给难住了,这转储文件到底是什么啊!不行,我得把它弄懂!愣着干嘛!这种求知若渴的精神不值得点赞吗? 文章目录一、概念二、转储文件的作用三、抓取转储文件 一...
  • HTTP处理响应

    千次阅读 2020-10-24 09:32:59
    服务器返回的原始数据就是所谓的响应。本章我们会分析 HTTP 响应里的各种组成部分。 状态码 我们要看的第一个组成部分是 HTTP 状态码.状态码是服务器接收到请求后返回的标识请求状态的三位数.在状态码的旁边,就是...
  • (2)响应式流——响应式Spring的道法术器

    万次阅读 多人点赞 2018-03-07 09:21:32
    前情提要: 什么是响应式编程 1.2 响应式流 上一节留了一个坑——为啥不用Java Stream来进行数据流的操作? 原因在于,若将其用于响应式编程中,是有局限性的。比如如下两个需要面对的问题: Web 应用具有I/...
  • 文件上传漏洞是什么?怎样防御文件上传漏洞攻击?文件上传漏洞是web安全中经常利用到的一种漏洞形式。这种类型的攻击从大的类型上来说,是攻击 数据与代码分离原则 的一种攻击。 一些web应用程序中允许上传图片,...
  • ftp上传下载中获取文件流方法ftp.retrieveFileStream(fileName) 无响应,或返回为null的问题 ftp.enterLocalPassiveMode();这个方法的意思就是每次数据连接之前,ftp client告诉ftp server开通一个端口来传输数据。...
  • IOS 应用开发简介 简单介绍了 IOS 工程文件, 界面设计文件, 按钮事件响应, 代码控制界面, 不同屏幕的图片适配
  • 我们了解到Tomcat是一种Web Container,与Nginx/Apache这一类的Web Server本质区别是,Tomcat不光可以处理静态...响应Servlet文件这件事,我们虽然还没有深入分析,但多少有点司空见惯的感觉了,毕竟做为一个Servl
  • HTTP响应协议和Response

    2019-05-17 13:39:34
    HTTP响应协议: 响应消息 请求消息: 客户端发送给服务器端的数据. 数据格式: 请求行: 请求方式 url信息 请求协议/版本号. ...响应体: 真实传输的数据,也就是我们传输的html这些文本文件,图片,音频等,这些浏览器...
  • 1. http协议有正文大小说明的content-length2. 或者分块传输chunked的话 读到0\r\n\r\n 就是读完了 ------------------------------------------------------...http响应内容比较大的话,会分成多个tcp segment 发...
  • 响应式开发原理

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

    千次阅读 多人点赞 2014-03-18 20:10:47
    来继续看一个响应式表格,重点学习媒体查询,智能手机中将表头隐藏,利用:before伪对象伪造表头,效果见如下图所示。
  • 从发送请求到服务器响应至浏览器都发生了什么? ** 输入网址回车后,浏览器首先要做DNS解析 1.搜索浏览器的DNS缓存 2.搜索操作系统自身的DNS缓存 3.搜索hosts文件 4.通过dns客户端向dns服务器发送解析请求...
  • 应急响应基础笔记

    2018-04-26 17:24:49
    应急响应笔记基础知识Linux操作系统基础一些常见的命令必须熟悉:ls怎么按照时间排序列出当前目录文件? ls实现列文件按时间排序 1) ls -lt 时间最近的在前面 2) ls -ltr 时间从前到后stat命令是干嘛的? 显示...
  • 用CSS实现响应式布局

    万次阅读 多人点赞 2018-07-30 15:30:14
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @media 类型 and (条件...
  • 响应式网页字体图标

    千次阅读 2014-02-02 18:28:05
    另一种常见的技术是依赖于网格图标和状态——CSS Sprites,并将其保存为.gif或.png文件。 然而,更糟糕的是图片根据响应式内容不断的放大,对于位图图像会产生锯齿,而且会越明显。更糟糕的是,CSSSpr
  • 如何防止QT程序未响应

    千次阅读 2018-03-05 23:41:22
    偶尔会执行一些可能很费时的代码,比如进行大规模的数据运算,生成或者拷贝文件,网络请求等,这些操作如果放在UI线程去做,一些操作,比如多点几次鼠标,或者是切换到其他程序再切换回来, 都很容易就会导致程序未响应,...
  • 现象:使用TortoiseSVN提交文件时,弹出提交窗口,要等待30秒的样子,才开始工作,开始提交文件后速度还是很快的。 解决后提交文件几乎是秒杀。  解决办法 (我的电脑可以了,但还是有些同事的电脑没解决) 1.在...
  • 我用文本形式打开了一个文件,在文件中段有一部分二进制码,我使用的是fistream.eof()作为文件结束的判断,但是文件在读到那段二进制码时就认为整个文件结束了,我想应该是那段二进制码出现了文件结束的标志符,于是...
  • css响应式页面实现

    千次阅读 2016-03-02 22:16:30
    响应式页面概念部分1.响应式页面的由来在很久很久以前,我们做的网页只是为了PC端的观看、使用,直到2000年,2.5G手机的出现,人们可以通过手机来访问网络,使得服务商们纷纷做了另一套网页为手机访问服务,这个情况...
  • 响应式设计与自适应设计

    千次阅读 2016-10-31 17:26:24
    响应式设计与自适应设计 相信从事前端页面设计的人都知道,页面呈现的效果及用户体验是非常重要的。当今社会移动设备的使用已超过了pc端,面对不同分辨率的设备,怎样做到页面体验的效果一样呢?这就成了最头疼的...
  • 响应式和自适应的区别

    万次阅读 2015-06-15 11:34:22
    先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试  自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/  整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家...
  • UIButton 扩大点击响应区域

    千次阅读 2017-10-12 09:59:38
    前言APP产品中不乏一些图标很小的,但需要响应的按键或者控件。如果这些需要响应的控件实际响应范围跟其响应的实际...反正不管怎么,如果产品有这个需求,我们也必须要处理的对不对?解决方案方案一(继承):直接创

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 152,014
精华内容 60,805
关键字:

响应文件是什么样子的