如何制作h5动态画面_拼团h5制作_h5网站_h5微信游戏成本_h5页面制作工具
当前位置:建站首页 > 关于我们 > 企业资质 >

响应式自适应网站怎么设计利于优化

发表日期:2020-10-18 16:28文章编辑:jianzhan浏览次数: 标签:    

自习气网页设计(ResponsiveWebDesign)是指可以主动识别终端设备屏幕的巨细从而做出相应调整的网页设计方法。这种网页设计方法完美解决了怎么在不同巨细的网络设备上呈现相同的网页效果。我们公认自习气至少有4个优点:提高用户体验;PC端和移动端SEO坚持一致;防止重复内容和犯错内容;链接统一。而自习气比较显着的缺陷是,开发成本比较高,尤其是要构建包含额定编程的杂乱的自习气网站,所需的时间会比较长。假如网站需求较简略,有许多开源模板可供选择。百度营销大学(百捷互联网学院)张老师认为:关于现已比较成熟PC网站来说,假如要完成全站的自习气,有可能需要推掉本来所有的代码进行重构,时间和技能成本都比较大,并且假如一个网站有多个portal(进口),会大大添加架构设计的杂乱度,所以现在有很多网站只在移动端完成了响应式布局设计。

自习气网页代码上需要做出哪些调整 1、阻止移动浏览器主动调整页面巨细

iOS和Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支撑viewportmeta元素掩盖默认的画布缩放设置,只需在HTML的 head 标签中刺进一个 meta 标签, meta 标签中可以设置详细的宽度(如像素值)或者缩放比例2.0(设备实践尺寸的两倍),下面是将一个页面扩大到设备实践尺寸两倍显示的meta标签示例: metaname=”viewport”content=”initial-scale=2.0,width=device-width”/

2、将网页修正为百分比布局

当某个浏览窗口处于媒体查询固定的规模之外,网页就需要水平滚动才干完好浏览,而通过百分比布局可以页面元素依据窗口巨细在一个又一个媒体查询之间活络修正样式,详细来讲,就是css代码不会指定详细像素宽度:width:xxxpx;而是会指定一个百分比宽度:width:xx%;或者直接就是width:auto;这里我们可以依据一个简易的公式将固定像素宽度转换成对应的百分比宽度:方针元素宽度 pide;上下文元素宽度=百分比宽度

例如:

pid=”wraper”

pid=“header” /p

/p

#wrapper{

margin-right:auto;

margin-left:auto;

width:960px;

}

#header{

margin-right:10px;

margin-left:10px;

width:940px;

}

转换为百分比的header区块的css为:

#header{

margin-right:10px;

margin-left:10px;

width:97.916667%

}

3、用em替换px

相同,方针元素宽度 pide;上下文元素宽度=百分比宽度这个公式也适用于将文字的像素单位转换为相对单位,值得留意的是,现代浏览器的默认文字都是16像素,因此一开始给body标签应用下列任何一条规则所发生的效果都一样:

font-size:100%;

font-size:16px;

font-size:1em;

例如某网站网站标题相应的样式:

#logo{

display:block;

padding-top:75px;

color:#0d0c0c;

font-family:Arial;

font-size:48px;

}

修正后的样式如下:

#logo{

display:block;

padding-top:75px;

color:#0d0c0c;

font-family:Arial;

font-size:3em

}

4、流动布局(fluidgrid)的使用

“流动布局”指的是各个区块的方位都浮动,不是固定不变的。

.main{float:right;width:70%;}

.leftBar{float:left;width:25%;}

这么做的优点是,假如宽度太小,放不下两个元素,后边的元素会主动滚动到前面元素的下方,不会在水平方向溢出,防止了水平滚动条的呈现,大大提高了用户的阅读体验。另外,肯定定位(position:absolute)的使用,也要十分小心。

5、MediaQuery技能的使用

在自习气设计的技能中,css3支撑css2.1界说的媒体类型,同时添加了很多涉及媒体类型的功用属性,包括max-width(最大宽度),device-width(设备宽度,orientation(屏幕定向:横屏或竖屏),因此可以通过MediaQuery加载相应的CSS文件.例如,下面代码界说了假如页面通过屏幕呈现,并且屏幕宽度不超过480px,则加载shetland.css

linkrel=\\\"stylesheet\\\"type=\\\"text/css\\\"media=\\\"screenand(max-device-width:480px)\\\"href=\\\"shetland.css\\\"/

相同可以创建多个样式表,以习气不同设备或者不同分辨率的宽度规模,当然更有用的做法是将多个MediaQuery整合在一个样式表文件中:

@mediaonlyscreenand(min-devece-width:320px)and(max-device-width:480px){

}

@mediascreenand(min-width:600px){

.hereIsMyClass{

width:30%;

float:right;

}

上面的代码中界说的样式类只有在浏览器屏幕宽度超过600px时才会有用。

因此,使用min-width和max-width可以同时判断屏幕尺寸与浏览器实践宽度,假如期望通过MediaQuery作用于某种特定设备,但忽略在其上运转的浏览器是否因为没有最大化尺寸与设备屏幕尺寸不一致,则能够使用max-device-width和max-device-width属性来判断设备本身屏幕尺寸。MediaQuery不是仅有的解决方案,相同可以通过Javascript来完成自习气设计,特别是某些旧浏览器无法完美支撑CSS3的MediaQuery时,它可以作为备选方案。当然,我们仍然能借助专业的Javascript库来协助旧浏览器(IE5+,Firefox1+,Safari2等)支撑CSS3的MediaQueries.使用方法:下载css3-mediaqueries.js,然后在页面中调用它即可,例如:

!--[ifltIE9]

scriptsrc=svn/trunk/css3-mediaqueries.js /script

![endif]--

6、设计响应式图片

有很多同比缩放图片的技能,其间有不少是简略易行的,比较盛行的方法是使用CSS的max-width属性:

img{max-width:100%;}

老版本的IE不支撑max-width,所以只好写成:

img{width:100%;}此外,windows平台缩放图片时,可能呈现图画失真现象。这时,可以尝试使用IE的专有命令:

img{-ms-interpolation-mode:bicubic;}

或者,EthanMarcotte的imgSizer.js。

addLoadEvent(function(){

varimgs=

ocument.getElementById(\\\"content\\\").getElementsByTagName_r(\\\"img\\\");

imgSizer.collate(imgs);

});

假如有条件的话,最好能依据屏幕的不同巨细,加载不同分辨率的图片。

三、自习气站点对百度SEO友爱的要害 1,applicable-device标注应该怎么写

有了自习气设计的网页,还要照顾到对百度友爱的设计,即通知百度“我是自习气页面”便利百度进行识别校验。方法也很简略,只需在上面viewport标签下面再添加一个applicable-device标签就行:

metaname=\\\"applicable-device\\\"content=\\\"pc,mobile\\\"

表明页面同时适合在移动设备和PC进步行浏览。

2,在使用百度站长平台链接提交东西的sitemp进行提交时,要做mobiletype标记,详细取值:

mobile:mobiletype=\\\"pc,mobile\\\"/

其他网页取值如下:

mobile:mobile/ :移动网页

mobile:mobiletype=\\\"mobile\\\"/ :移动网页

mobile:mobiletype=\\\"htmladapt\\\"/ :代码适配

无该上述标签表明为PC网页

来历:本文由原创撰写,欢迎分享本文,转载请保留出处和链接!
是一家从事SMT设备的代理,设计、出售及效劳的设备商,深圳三本建立的宗旨是为用户提供先进的设备和技能,既合乎用户现在出产需要且兼顾将来科技开展。此外,本司对用户提供的完善技能支撑,亦是本司成功的重点。
相关新闻