产品详细介绍
自适应也称为响应(response)，是指能够自动识别屏幕宽度并做出相应调整的网页设计。目前，它正被越来越多的网站使用。与此同时，百度还公开宣布，它鼓励每个人使用HTML5技术建立一个网站，让用户在个人电脑和移动站都有良好的体验。那么，为了对百度更加友好，适应性网站需要在代码上做哪些调整呢？首先，什么样的网站适合自适应网页设计(Responsive Web Design)是指一种能够自动识别终端设备屏幕大小并做出相应调整的网页设计方法。这种网页设计方法完美地解决了如何在不同大小的网络设备上呈现相同的网页效果。一般认为，自适应至少有4个好处:来增强用户体验；个人电脑和手机的搜索引擎优化是一致的。避免重复内容和错误内容；链接是统一的。然而，自适应的明显缺陷是开发成本相对较高，尤其是构建包含额外程序的复杂自适应网站所需的时间相对较长。如果网站需求相对简单，有许多开源模板可供选择。对于一个成熟的个人电脑网站来说，如果你想实现全站的适应，你可能需要推出所有的原始代码进行重建，这需要花费大量的时间和技术。此外，如果一个网站有多个门户，将大大增加架构设计的复杂性。因此，许多网站现在只在移动端实施被动布局设计。2.应该对自适应网页代码1进行哪些调整。阻止移动浏览器自动调整页面大小的iOS和安卓浏览器基于网络工具包核心。这两种浏览器和许多其他浏览器支持视口元元素来覆盖默认画布缩放设置。只在超文本标记语言的头部标记中插入一个元标记。元标签中可以设置2.0的特定宽度(如像素值)或缩放比例(设备实际尺寸的两倍)。以下是meta tag : meta name=" viewport " content=" initial-scale=2.0的示例，它通过将页面放大到设备实际大小的两倍来显示。宽度=设备宽度/
2。将页面修改为百分比布局。当浏览窗口超出媒体查询的固定范围时，页面需要水平滚动才能完全浏览。通过百分比布局，页面元素可以根据窗口大小灵活地将样式从一个媒体查询修改到另一个媒体查询。具体来说，css代码没有指定特定的像素宽度:宽度width:xxx像素；相反，它指定一个百分比宽度:宽度: xx %；或者直接横向:自动；这里我们可以根据一个简单的公式将固定的像素宽度转换为相应的百分比宽度:目标元素宽度\u上下文元素宽度=百分比宽度例如:divide=" wrapper " divide=" header "/div/div # wrapper { margin-right : auto；左边距left: auto宽度: 960 px；} #标题{右边距: 10px；左边距:10px。宽度: 940 px；}转换为百分比的标题块的css为:# header { margin-right : 10px；左边距:±10px；宽度: 97.916667%/* 940≥960 */} 3。用em替换px。同样，目标元素宽度-上下文元素宽度=百分比宽度的公式也适用于将文本的像素单位转换为相对单位。值得注意的是，现代浏览器中的默认文本是16像素，因此在开始:font-size: 100%时，对正文标签应用以下任何规则的效果都是相同的；font-size 336016 px；font-size 3360 1em；例如，对应于网站标题的样式: #徽标{ display : block }；填充-top : 75px；color: #0d0c0c。font-family : Arial；font-size 3360 48px；}修改后的样式如下: #徽标{ display: block填充-top : 75px；color: #0d0c0c。字体系列: Arial；font-size 33603 em/* 48÷16 */} 4 */} 4。使用流体网格“流动布局”意味着每个区块的位置是浮动的，而不是固定的。main { float: right宽度:±70%；}。leftBar { float: left宽度:±25%；这样做的优点是，如果宽度太小而不能容纳两个元素，下面的元素将自动滚动到前面元素的底部，而不会在水平方向溢出，从而避免水平滚动条的出现，并大大改善用户的阅读体验。此外，绝对位置:的使用必须非常小心。 5.媒体查询技术的使用在自适应设计技术中，css3支持css2.1中定义的媒体类型，并添加了许多与媒体类型相关的功能属性，包括最大宽度(最大宽度)、设备宽度(设备宽度、方向(屏幕方向:水平或垂直屏幕)，因此可以通过媒体查询加载相应的css文件。例如，下面的代码定义了如果页面通过屏幕呈现并且屏幕宽度不超过480像素，那么加载shetland.csslinkerel="样式表" type=" text/CSS " media=" screen and(最大设备宽度: 480像素)" href=" shetland . CSS "/也可以创建多个样式表。为了适应不同设备或不同分辨率的宽度范围，当然，将多个媒体查询集成到样式表文件: mediaonly屏幕和(最小设备宽度: 320px)和(最大设备宽度: 480px) {/*样式*/} 媒体屏幕和(最小宽度: 600px)中更有效。这是自行车{宽度:±30%；向右浮动:°；}以上代码中定义的样式类仅在浏览器屏幕宽度超过600像素时有效。因此，使用最小宽度和最大宽度可以同时判断屏幕大小和浏览器的实际宽度。如果您想通过“媒体查询”对特定设备进行操作，但由于没有最大大小，因此忽略在其上运行的浏览器是否与设备的屏幕大小不一致，则可以使用最大设备宽度和最大设备宽度属性来判断设备本身的屏幕大小。媒体查询不是唯一的解决方案。它还可以通过Javascript进行适应性设计，尤其是当一些旧浏览器不能完全支持CSS3的媒体查询时。当然，我们仍然可以使用专业的Javascript库来帮助旧浏览器(IE5、火狐1、Safari 2等)。)支持CSS3媒体查询。使用方法:下载CSS 3-media query . js，然后在页面中调用它，例如:–[如果lt IE 9]脚本src=http://CSS 3-媒体查询-js . googlecode . com/SVN/trunk/CSS 3-媒体查询. js/脚本！[·恩迪夫]–6。有许多设计响应图片的技术，其中许多都很简单，易于实现。最流行的方法是使用CSS的最大宽度属性:img {最大宽度: 100%；旧版本的工业工程不支持最大宽度，所以它必须写成:}此外，在窗口平台上缩放图片时，可能会出现图像失真。此时，您可以尝试使用IE的专有命令:IMG {-微软-内插法-MODE:双三次；伊森·马科特的imgSizer.js。addLoadEvent(函数(){ var imgs=document . GetElementBYID(“内容”)。getElementsBytagName(“img”)；img Sizer . collate(img)；})；如果有条件，最好根据屏幕的不同大小加载不同分辨率的图片。第三，百度友好适应性网站的关键1。适用-设备应标明如何编写具有适应性设计的网页，并注意百度友好的设计，即告诉百度“我是适应性页面”，以方便百度的识别和验证。该方法也非常简单，只需在上面的视窗标签下添加一个适用的设备标签:元名称="应用程序-设备"内容="个人电脑，移动"意味着该页面适合在移动设备和个人电脑上浏览。2.使用百度网站管理员平台链接提交工具的sitemp提交时，应做移动类型标记，具体值为:Mobi: Mobile Type=" PC，mobile "/其他网页取以下值:mobile:mobile/:移动网页Mobile : Mobile TYPe=" Mobile "/:移动网页Mobile : Mobile TYPe=" html tapt "/:代码适配此类标记不表示为PC网页
2。将页面修改为百分比布局。当浏览窗口超出媒体查询的固定范围时，页面需要水平滚动才能完全浏览。通过百分比布局，页面元素可以根据窗口大小灵活地将样式从一个媒体查询修改到另一个媒体查询。具体来说，css代码没有指定特定的像素宽度:宽度width:xxx像素；相反，它指定一个百分比宽度:宽度: xx %；或者直接横向:自动；这里我们可以根据一个简单的公式将固定的像素宽度转换为相应的百分比宽度:目标元素宽度\u上下文元素宽度=百分比宽度例如:divide=" wrapper " divide=" header "/div/div # wrapper { margin-right : auto；左边距left: auto宽度: 960 px；} #标题{右边距: 10px；左边距:10px。宽度: 940 px；}转换为百分比的标题块的css为:# header { margin-right : 10px；左边距:±10px；宽度: 97.916667%/* 940≥960 */} 3。用em替换px。同样，目标元素宽度-上下文元素宽度=百分比宽度的公式也适用于将文本的像素单位转换为相对单位。值得注意的是，现代浏览器中的默认文本是16像素，因此在开始:font-size: 100%时，对正文标签应用以下任何规则的效果都是相同的；font-size 336016 px；font-size 3360 1em；例如，对应于网站标题的样式: #徽标{ display : block }；填充-top : 75px；color: #0d0c0c。font-family : Arial；font-size 3360 48px；}修改后的样式如下: #徽标{ display: block填充-top : 75px；color: #0d0c0c。字体系列: Arial；font-size 33603 em/* 48÷16 */} 4 */} 4。使用流体网格“流动布局”意味着每个区块的位置是浮动的，而不是固定的。main { float: right宽度:±70%；}。leftBar { float: left宽度:±25%；这样做的优点是，如果宽度太小而不能容纳两个元素，下面的元素将自动滚动到前面元素的底部，而不会在水平方向溢出，从而避免水平滚动条的出现，并大大改善用户的阅读体验。此外，绝对位置:的使用必须非常小心。 5.媒体查询技术的使用在自适应设计技术中，css3支持css2.1中定义的媒体类型，并添加了许多与媒体类型相关的功能属性，包括最大宽度(最大宽度)、设备宽度(设备宽度、方向(屏幕方向:水平或垂直屏幕)，因此可以通过媒体查询加载相应的css文件。例如，下面的代码定义了如果页面通过屏幕呈现并且屏幕宽度不超过480像素，那么加载shetland.csslinkerel="样式表" type=" text/CSS " media=" screen and(最大设备宽度: 480像素)" href=" shetland . CSS "/也可以创建多个样式表。为了适应不同设备或不同分辨率的宽度范围，当然，将多个媒体查询集成到样式表文件: mediaonly屏幕和(最小设备宽度: 320px)和(最大设备宽度: 480px) {/*样式*/} 媒体屏幕和(最小宽度: 600px)中更有效。这是自行车{宽度:±30%；向右浮动:°；}以上代码中定义的样式类仅在浏览器屏幕宽度超过600像素时有效。因此，使用最小宽度和最大宽度可以同时判断屏幕大小和浏览器的实际宽度。如果您想通过“媒体查询”对特定设备进行操作，但由于没有最大大小，因此忽略在其上运行的浏览器是否与设备的屏幕大小不一致，则可以使用最大设备宽度和最大设备宽度属性来判断设备本身的屏幕大小。媒体查询不是唯一的解决方案。它还可以通过Javascript进行适应性设计，尤其是当一些旧浏览器不能完全支持CSS3的媒体查询时。当然，我们仍然可以使用专业的Javascript库来帮助旧浏览器(IE5、火狐1、Safari 2等)。)支持CSS3媒体查询。使用方法:下载CSS 3-media query . js，然后在页面中调用它，例如:–[如果lt IE 9]脚本src=http://CSS 3-媒体查询-js . googlecode . com/SVN/trunk/CSS 3-媒体查询. js/脚本！[·恩迪夫]–6。有许多设计响应图片的技术，其中许多都很简单，易于实现。最流行的方法是使用CSS的最大宽度属性:img {最大宽度: 100%；旧版本的工业工程不支持最大宽度，所以它必须写成:}此外，在窗口平台上缩放图片时，可能会出现图像失真。此时，您可以尝试使用IE的专有命令:IMG {-微软-内插法-MODE:双三次；伊森·马科特的imgSizer.js。addLoadEvent(函数(){ var imgs=document . GetElementBYID(“内容”)。getElementsBytagName(“img”)；img Sizer . collate(img)；})；如果有条件，最好根据屏幕的不同大小加载不同分辨率的图片。第三，百度友好适应性网站的关键1。适用-设备应标明如何编写具有适应性设计的网页，并注意百度友好的设计，即告诉百度“我是适应性页面”，以方便百度的识别和验证。该方法也非常简单，只需在上面的视窗标签下添加一个适用的设备标签:元名称="应用程序-设备"内容="个人电脑，移动"意味着该页面适合在移动设备和个人电脑上浏览。2.使用百度网站管理员平台链接提交工具的sitemp提交时，应做移动类型标记，具体值为:Mobi: Mobile Type=" PC，mobile "/其他网页取以下值:mobile:mobile/:移动网页Mobile : Mobile TYPe=" Mobile "/:移动网页Mobile : Mobile TYPe=" html tapt "/:代码适配此类标记不表示为PC网页 
