• 深入剖析响应式布局的原理


    到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动 设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布 局该怎么设计(通过CSS3 Media Query实现响应布局)。  

    响应式布局顾名思义就是随电脑屏幕的大小而改变,响应式布局就是用不同的终端来查看页面,可以根据不同的大小来显示页面。响应式布局又优点,也有缺点,优点是:面对不同分辨率设备灵活性强。能够快速解决多设备显示适应问题。缺点:兼容各种设备工作量大,效率低下,代码累赘,会出现一些隐藏无用的元素 ,加载时间长,响应式布局也是一种程度上折衷性质的设计解决方案,多方面因素影响而达不到最佳效果,一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。这就是响应式布局。

    首先我们先认识一下什么是 media属性吧

    @media screen and (min- 320px) and (max-width : 479px)

    就从这个条件语句开始介绍,media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一)。然后用 and 关键字来连接条件,然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。

    这个语句就是响应式布局的基础应用了,在给它赋予不同的值就能在不同的大小屏幕上显示了。 我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,现在还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,呵呵,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷……Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受minmax用于表达大于或等于小与或等于。如:width会有min-widthmax-width媒体查询可以被用在CSS中的@media@import规则上,也可以被用在HTMLXML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。所以使用响应式媒体对象,就一定要学会meidia query查询。

    所以响应式布局在html中是一个非常一个不错的设计理念,响应式布局给大家带来了许多的方便,让大家在不同的设备中也能看一些页面。

     

  • 相关阅读:
    Vista总管注册机
    [更正]谈获取当前系统类型(SP OR PPC)
    [CallerLoc插件]SmsReply For CallerLoc (未接自动回复短信增强版)
    也谈Windows Mobile中打开/关闭WIFI
    C#实现Eval函数功能
    解决DotNetTextBox与window.history冲突!
    Vista单个程序静音带来的麻烦
    快速打开/关闭系统功能开关(CmdSwitch For SP & PPC)
    终于实现打开/关闭飞行模式了
    7.3 Hardware Prefetching 《Speculative Execution in High Performance Computer Architectures》
  • 原文地址:https://www.cnblogs.com/2460403802q/p/5823219.html
Copyright © 2020-2023  润新知