如何让网页自适应屏幕大小

 我来答
IT168
2022-12-06 · 百度认证:IT168官方账号,优质数码领域创作者
IT168
IT168是中国最大的个人和企业IT产品选购、互动网站,每日提供最新的IT产品报价、促销行情、手机、平板、笔记本、相机和企业等50个频道提供最专业的产品选购和使用建议。
向TA提问
展开全部

想要网页宽度自适应,需要把网页元素宽度设置为百分比,还要在网页头部加上代码:<metaname="viewport"content="width=device-width,initial-scale=1.0"/>。

图片自适应,且不超过原始大小,需要设置最大宽度,代码如下:img{ width:100%; max-width:100%;}。

改进功能

  1. 浏览器首次使用时,根据用户显示分辨率大小决定是否默认显示收藏栏;

  2. 打开多个标签关闭浏览器时,提示用户确认;

  3. 搜索栏关键词提示;

  4. 搜索栏支持多个搜索引擎;5.内核窗口resize速度

我努力的方式
2016-11-16 · 知道合伙人教育行家
我努力的方式
知道合伙人教育行家
采纳数:16676 获赞数:94928
国际注册高级纹绣师 国家高级形象设计师 国家高级化妆造型师

向TA提问 私信TA
展开全部
1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9,对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;
只能指定百分比宽度:width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
茹长青礼棋
2019-01-22 · TA获得超过3.5万个赞
知道大有可为答主
回答量:1.3万
采纳率:30%
帮助的人:631万
展开全部
这位网友你好,想要网页宽度自适应,你需要把网页元素宽度设置为百分比,还要在网页头部加上代码:
  图片自适应,且不超过原始大小,需要设置最大宽度,代码如下:
img{
width:100%;
max-width:100%;}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
黎凡s
2016-11-16 · 穷则独善其身。。。。。。
黎凡s
采纳数:197 获赞数:364

向TA提问 私信TA
展开全部
用响应式布局,可以看看bootstrap框架,它做的就很好
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
天水日月明
2016-11-16 · TA获得超过139个赞
知道小有建树答主
回答量:177
采纳率:0%
帮助的人:61.7万
展开全部
.indexcontent{background:#FF6600;width:100%;height:467px;text-align:center;margin: 0;} 这样就一直全屏了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式