响应式布局(PC与手机访问的兼容性)

响应性布局编辑回应式布局是伊森马科特在2010年5月提出的一个概念。简而言之，网站可以兼容多个终端，而不是为每个终端制作特定的版本。这个概念的诞生是为了解决移动互联网浏览的问题。响应式布局可以为不同终端的用户提供更舒适的界面和更好的用户体验，随着目前大屏幕移动设备的普及，用它来描述这个时代的趋势并不为过。随着越来越多的设计师采用这种技术，我们不仅看到了许多创新，也看到了一些造型模式。1.优势与劣势编辑优势：面对不同的分辨率设备，灵活性很强可以快速解决多设备显示适配的问题缺点：兼容各种设备，工作量大，效率低。代码繁琐，隐藏的无用元素会出现，加载时间会延长。事实上，这是一个折衷的设计解决方案，它受到许多因素的影响，无法达到最佳效果。在一定程度上，网站原有的布局结构发生了变化，造成了用户的困惑。2设计理念编辑器我们已经了解了什么是响应布局，以及我们应该如何在实际项目中设计它？过去，当我们设计网站时，我们被不同浏览器的兼容性所困扰。我们还需要不同尺寸的设备。我们怎样才能冷静下来？有需求就有解决方案。说到响应性布局，我们必须提到CSS3中的媒体查询，这是一件好事。它易于使用，功能强大，速度快.媒体查询是做出响应性布局的利器。使用这个工具，我们可以方便快捷地创建各种丰富实用的界面。接下来，让我们进一步了解媒体查询。1.CSS3中的媒体查询是什么？通过不同的媒体类型和条件定义样式表规则。媒体查询使CSS能够更准确地对不同的媒体类型和相同媒体的不同条件进行操作。媒体查询的大多数媒体属性接受最小值和最大值来表示“大于或等于”和“小于或等于”。例如，宽度将有最小宽度和最大宽度的媒体查询，它们可以在CSS的media和import规则中使用，也可以在HTML和XML中使用。通过这个标签属性，我们可以很容易地在不同的设备下实现丰富的界面，尤其是移动设备，这将会得到更广泛的应用。2.媒体查询可以获得什么值？设备的宽度和高度设备宽度，设备高度显示屏/触觉设备。渲染窗口、高度显示屏/触觉设备的宽度和高度。设备的手持方向、水平或垂直方向(纵向|横向)、打印机等。长宽比点阵打印机等。设备-长宽比-点阵打印机等。对象颜色或颜色列表颜色，颜色索引显示屏。设备的分辨率。3.语法结构和用法仅媒体设备名称(选择标准)而非(选择标准)和(设备选择标准)，设备2 规则示例1:在链接中使用media:仅可在上述使用中省略，并仅限于计算机显示器。第一个条件最大宽度是指渲染界面的最大宽度，第二个条件最大设备宽度是指设备的最大宽度。示例2:在样式表中嵌入media:媒体(最小设备宽度：1024px)和(最大设备宽度：989px)，屏幕和(最大设备宽度：480px)，(最大设备宽度：480px)和(方向：landscape)，(最小设备宽度：480px)和(最大设备宽度：1024px)和(方向3:纵向) 0在示例2中，计算机显示分辨率(宽度)被设置为大于或等于1024px(并且最大可见宽度为989 px)；屏幕宽度等于或小于480像素的手持设备；屏幕宽度为480像素且水平的手持设备(即平行于地面的480个维度)；Css样式，屏幕宽度等于或等于480像素，小于1024像素，垂直放置设备。从上面的例子中可以看出，字符由空格连接，选择标准包含在小括号中，而srules是一个带有兼容设置的样式表，它包含在中间的括号中。只有(限于某个设备，可以省略)和(逻辑与)，而不是(排除某个设备)是逻辑关键字，各种设备用逗号分隔，这继承了css的基本语法。4.可用设备名称参数：可用的设备名称参数可用的设备名称参数5.逻辑关键词：逻辑键逻辑键6.可用设备名称参数：可用的设备名称参数可用的设备名称参数7.测试媒体查询最后，我们需要测试我们刚刚设计的媒体查询。为了测试媒体查询在不同设备上的效果，我们可以使用浏览工具来检查不同尺寸屏幕下的显示效果。这里我们介绍一个很好的在线工具响应者，它可以模拟各种设备，比如iPhone。此外，您可以自定义不同尺寸屏幕的显示效果。您只能输入一个网址，甚至一个本地网址(如/)，您可以在不同大小的屏幕下看到网站的显示效果。8.通过媒体查询实现响应性布局设计好的，我们理解什么是媒体查询，然后让我们把它应用到响应布局的设计项目中。设计思想很简单。首先，在标准浏览器下定义固定宽度(如果标准浏览器的分辨率是1024px，那么我们将宽度设置为980px)。然后使用媒体查询来监控浏览器的大小变化。当浏览器的分辨率小于1024像素时，通过媒体查询预设的样式表，将页面宽度设置为显示百分比。这样，页面的结构元素将根据浏览器的大小进行相应的调整。类似地，当浏览器的可视区域改变到某个值(比如650像素)时，页面的结构元素会根据媒体查询预设的级联样式表进行相应的调整。看看我们的例子：/*当浏览器的可视区域小于980像素*/媒体屏幕和(最大宽度：980px) #包装宽度：90%；margin:0 auto#内容宽度：60%；填料：5%；#侧栏宽度：30%；#页脚填充：8% 5%；底部边距：10px/*当浏览器的可视区域小于650像素*/媒体屏幕和(最大宽度：650像素)# header height:auto；# search form position:absolute；顶部：5px右侧：0；# content width:auto；float:无；边距：20px 0；#侧栏宽度：100%；float:无；边距：0；通过以上，我们可以监控浏览器可视区域的变化，我们的页面结构元素也会相应地变化。当然，您可以设置更多的监控级联样式表，这样可以根据不同大小的设备做出响应性的布局。为了更好地显示，我们经常需要格式化一些CSS属性的初始值：/*在iPhone中禁用Safari的自动字体大小调整*/html -webkit-text-size-adjust:无；/*将HTML5元素设置为块*/文章、旁白、详细信息、图片标题、图片、页脚、页眉、用户组、菜单、导航、章节显示：块；/*设置自适应调整，如图片和视频*/img 最大宽度：100%；高度：自动；宽度：自动 9；/* ie8 */。视频嵌入。视频对象。视频iframe 宽度：100%；高度：自动；最后但同样重要的是，在页面的标题之间添加以下句子：MetViewport该属性用于设置移动设备上显示的原始大小以及是否缩放。参数设置：宽度视口的宽度高度视口的高度初始标度-初始标度最小比例-允许用户缩放的最小比例最大比例-允许用户缩放的最大比例用户可扩展-用户可以手动扩展吗2例如，如果移动终端的屏幕显示最大宽度为480像素，则css代码如下： mediaonly屏幕和(最大设备宽度：480像素)./*这是支持此移动设备的css样式代码，需要放在pc终端的css代码之后才能覆盖*/如果是一个大型网站或项目，我们将独立为各种类型的移动终端编写css样式的文件。此时的使用方法如下：/*small_screen480.css是为480px移动终端编写的css文件*/Css文件是单独引用的。接下来的工作是我们非常熟悉的灵活布局。另外，我们应该注意两点。一个是图片