用ps自动切成的网页怎么不会自适应,要怎么改?
发布网友
发布时间:2022-04-30 04:47
我来回答
共1个回答
热心网友
时间:2023-10-13 21:05
ps裁切的网页是无法自适应的,因为他只完成了页面的外观制作,页面自适应需要html代码配合,目前常用的做法,使用html的meta标签来实现页面自适应:
<meta name="viewport" content="width=device-width, initial-scale=1" />
如上述标签,此代码不支持ie8以下浏览器
另一种是使用css样式表来进行*:
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
上述代码就是说在屏幕宽度低于480px时进行的样式设置,针对移动平台,往往你看一个网站,css里可能会有多个此种css样式进行不同尺寸约束
然后说下页面字体,自使用字体样式不用px来约束,而是em,这个是相对字体,px是绝对字体,一般来说16px=1em
图片的自适应:这个一般会使用样式 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }
在css3中背景的自适应可以使用background-size:100% 100%;
所以要制作自适应网站绝不是那么简单用ps裁切就可以的,要对代码进行修改,如果你对代码不是很了解,可以使用dreamweaver创建一个自适应的页面模板来学习一下,或者是网上下载一个免费的自适应网页模块在他基础上修改都是比较方便快捷的方法。
热心网友
时间:2023-10-13 21:05
ps裁切的网页是无法自适应的,因为他只完成了页面的外观制作,页面自适应需要html代码配合,目前常用的做法,使用html的meta标签来实现页面自适应:
<meta name="viewport" content="width=device-width, initial-scale=1" />
如上述标签,此代码不支持ie8以下浏览器
另一种是使用css样式表来进行*:
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
上述代码就是说在屏幕宽度低于480px时进行的样式设置,针对移动平台,往往你看一个网站,css里可能会有多个此种css样式进行不同尺寸约束
然后说下页面字体,自使用字体样式不用px来约束,而是em,这个是相对字体,px是绝对字体,一般来说16px=1em
图片的自适应:这个一般会使用样式 max-width: 100%;或width:100%; 语句为:img { max-width: 98%; }
在css3中背景的自适应可以使用background-size:100% 100%;
所以要制作自适应网站绝不是那么简单用ps裁切就可以的,要对代码进行修改,如果你对代码不是很了解,可以使用dreamweaver创建一个自适应的页面模板来学习一下,或者是网上下载一个免费的自适应网页模块在他基础上修改都是比较方便快捷的方法。