网站优化

建网站需要多少钱:北京网站制作自顺应网页规划

作者:admin 发布时间:2020-07-04
在网站HTML文件的最初,添加viewport meta标签通知阅读器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:   这段代码支撑Chrome、Firefox、IE9以上的阅读器,但不支撑IE8以及低于IE8的阅读器。 2、在CSS文件尾部添加针对不同屏幕分辨率的规则。   例如使用如下的代码,能够让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度主动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修正一下即可。   3、布局宽度使用相对宽度。   网页整体框架能够使用肯定宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修正就便利。当然也能够不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里边添加各个div的针对小屏幕的宽度,实践上更麻烦。   4、页面使用相对字体(非必要)   在HTML页面上不要使用肯定字体(px),而要使用相对字体(em),关于大大都阅读器来说,通常用 em = px/16 换算,例如16px就等于1em。   5、图片自习气(非必要)   img标签的话,只需要设置 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }   css加载的background-image怎么自习气巨细呢,其实CSS3中是可以完成的,添加如下语句:background-size:100% 100%;   依据上面讲述的几点内容,我针对我博客的CSS进行了一些修正,发现可以从iPhone手机阅读到体验更佳的页面,但有一个问题没有解决,就是顶部导航栏navbar显示有问题,换行后被下面的文章盖住了,不知道怎样能更好地解决这个问题(更新:通过网友提示,在导航栏divNavbar的样式里,加入  white-space:nowrap; overflow:hidden;  即可解决这个问题)。    

收缩