用dreamweaver制作网页 宽度如何设置自动铺满屏幕,长度如何设置一屏长度?
我设置导航栏宽度为210px公司名称那个div标签我设置宽度为100%,可是内容区域的宽度我就不知道该怎么设置了,我想设置这三个区域正好能铺满一个屏幕,该怎么设置啊???...
我设置导航栏宽度为210px 公司名称那个div标签我设置宽度为100%, 可是内容区域的宽度我就不知道该怎么设置了 , 我想设置这三个区域正好能铺满一个屏幕,该怎么设置啊???
展开
1个回答
展开全部
1:Meta 标签
为了适应屏幕,不少移动浏览器都会把HTML页面置于较大视口宽度(一般会大于屏幕宽度),你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: Media Queries
CSS3 media query是自适应网页设计的关键,他就像高级语言里的if条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。
如果视口宽度小于等于980px,下面规则生效。
这里将容器像素宽度该用百分比,页面排版更加灵活。
<style type="text/css">
@media screen and (max-width:980px){
#t1{width:100%}
.t2{width:60%}
}
</style>
注意:要将px改成百分比
#代表id的样式引用
.代表class的样式引用
为了适应屏幕,不少移动浏览器都会把HTML页面置于较大视口宽度(一般会大于屏幕宽度),你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: Media Queries
CSS3 media query是自适应网页设计的关键,他就像高级语言里的if条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。
如果视口宽度小于等于980px,下面规则生效。
这里将容器像素宽度该用百分比,页面排版更加灵活。
<style type="text/css">
@media screen and (max-width:980px){
#t1{width:100%}
.t2{width:60%}
}
</style>
注意:要将px改成百分比
#代表id的样式引用
.代表class的样式引用
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询