以后地位:首页 > 咱们的概念 > 列表

CSS HTML5 自顺应网页设想的方式

点击: 次时候:2015/5/29关头词:css html5 网页设想
1、在HTML头部增添viewport标签。在网站HTML文件的开首,增添viewport meta标签告知阅读器视口宽度即是装备屏幕宽度,且不停止初始缩放。代码以下:这段代码撑持Chrome、Firefox、IE9以上的阅读器,但不撑持IE8和低于IE8的

1、在HTML头部增添viewport标签。

在网站HTML文件的开首,增添viewport meta标签告知阅读器视口宽度即是装备屏幕宽度,且不停止初始缩放。代码以下:

这段代码撑持Chrome、Firefox、IE9以上的阅读器,但不撑持IE8和低于IE8的阅读器。

2、在CSS文件尾部增添针对差别屏幕分辩率的法则。

比方利用以下的代码,能够让屏幕宽度低于480像素的装备(如iPhone等),网页侧栏埋没中部内容栏宽度主动调理。以下代码针对Z-Blog,WordPress相干标署名称只要点窜一下便可。

@media screen and (max-device-width: 480px) {
  #divMain{
  float: none;
  width:auto;
  }
  #divSidebar {
  display:none;
  }
}

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%;


预定建站
收费供给网站优化
支付关头词