海南网站建设新闻
您当前位置:海南网站建设首页 >> 海南网站建设新闻 >> 网站设计技术
海口网站建设新闻

自适应网页怎样做?

时间: 2015-04-01 来源:www.yuechengnet.com 作者: 点击:0

 自适应网页怎样做?

在制作网站时,网页的自适应是如何实现的,这个是每个开发人员碰到的问题,那么自适应网页怎样做呢?海口网站建设公司为你一一分解:
 自适应网页怎样做?
1,所谓网页自适应,就是可以自动识别屏幕宽度,做出相应调整的网页宽度,合理布局。
比如,如果屏幕宽度大于1024px,两个600px的div并排在一行,此时的画面是两div并排且居中于屏幕中间。如果屏幕宽度小于1024px时,那么两个div会分两行显示。
  
2,网页宽度自适应设置  
  如何做到网页宽度自适应,在html5中得有这方面的应用,很简单只要在网页代码的首部,加入一行viewport元标签。<metaname="viewport"content="width=device-width,initial-scale=1"/>,不论PC屏幕还是移动屏幕的大小更变,都会随之增大与缩小自适应。在这里说说viewport 标签作用,它是网页默认的宽度和高度,网页宽度和屏幕宽度等大小,原始缩放比例(initial-scale=1)为1.0,网页初始大小和屏幕面积相等。
  
3,网页自适应不推荐使用绝对宽度
  
  若网页需要随屏幕大小调整布局,建议不使用绝对宽度的布局,也不能使用绝对宽度的元素。比如,div 不能指定像素宽度:width:px;只能指定百分比宽度:width:xx%;或者设置为 width:auto;
  
4,流动布局各个区块的位置不能固定不动,采用浮动的区块。
 
5,字体大小设置只能使用相对大小数点(em),不能用绝对大小(px)。
 
6,利用@media标签的两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件。第一种:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 500px)">
意思是当屏幕的宽度大于等于500px的时候,应用A.css
<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 500px) and (max-width: 900px)">
意思是当屏幕的宽度大于500小于900时,应用B.css
第二种:是直接写在<style>标签里:
@media screen and (max-width: 400px) { /*当屏幕尺寸小于400px时,应用下面的CSS样式*/
  .class {
    background: #fff;
  }
}
写法是前面加@media,其它跟link里的media属性相同
其实基本上就是样式覆盖,判断设备,然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。 
 
7,网页自适应(fluidimage)除了布局和文本,自适应网页设计也得实现图片自动缩放。
 除了  自适应网页怎样做?外,你可能对 海南网站迁移有哪些步骤 感兴趣

 

相关文章