为了账号安全,请及时绑定邮箱和手机立即绑定

如何解决pc端不同分辨率显示的内容是一样的

如何解决pc端不同分辨率显示的内容是一样的

小小孩~ 2016-07-14 09:42:57
就是做好的一个网站,我电脑上的分辨率是1920*1080的,我希望在各个分辨率上我的内容都可以看得到,适应各个分辨率
查看完整描述

8 回答

?
blovetu

TA贡献319条经验 获得超234个赞

1.首先,在<head>里加入一行viewport元标 签。<meta name=”viewport”content=”width=device-width, initial-scale=1″ />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩 放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

2.“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

3. 其次,除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

4.移动端的单位一般都是用rem,em和 %,但你一定要分清rem和em之间的区别再用


查看完整回答
7 反对 回复 2016-07-14
?
宇xixi

TA贡献10条经验 获得超4个赞

有3种方法:

1、后面设置背景,然后内容主要集中在中间的1000像素以内,现在浏览器很少小于1000像素了。就算缩放窗口也不会乱掉。

2、全屏内容的,先想好宽高比,在用js获取浏览器宽度,然后根据宽度计算高度,实现动态大小(宽高比一般是固定),这时候我一般会设置个最小宽度(min-width)限制。

var $width = parseInt($(window).outerWidth());

一般我用这句话获得浏览器宽度(jQuery的)。

3、HTML5+CSS3里面有个Media Queries这个可以去搜索了解下,慕课里就有

查看完整回答
4 反对 回复 2016-07-14
  • 陈小窝
    陈小窝
    如何算宽高比,我目前的公司是定宽不定高,就是宽度以百分比显示,然后不给高的地方尽量不给高,就算要给高,也是通过动态的计算出来的,然后最小内容要到1000px
?
老板请与我联系

TA贡献1条经验 获得超1个赞

meta:vp  按tab建 内容修改自适应

查看完整回答
1 反对 回复 2016-07-25
?
swust_li

TA贡献18条经验 获得超5个赞

  1. 宽度可以百分比设置;

  2. 2.@media媒体查询


查看完整回答
1 反对 回复 2016-07-14
?
慕仔5033622

TA贡献1条经验 获得超0个赞

根据ui图,width使用百分比,设置最小宽度就行了,这样自适应不同分辨率。

查看完整回答
反对 回复 2018-03-28
?
茫海

TA贡献21条经验 获得超10个赞


这就是现在流行的响应式设计,你可以查一下这个概念

查看完整回答
反对 回复 2016-07-14
?
nickylau82

TA贡献128条经验 获得超67个赞

首先,你要想清楚,是不同分辨率显示的内容是一样的?还是不同分辨率显示的内容是不一样的

内容一样的很简单,布局全部用固定的长度即可。这样唯一的问题就是在小分辨率的屏幕上会有横向和纵向的滚动条。或者在大屏幕上看太小。。

内容不一样就用自适应布局和rem即可。

查看完整回答
1 反对 回复 2016-07-14
?
DangCode

TA贡献11条经验 获得超3个赞

如果时pc端不用适应各个分辨率 直接把网站弄成国定的就行了

查看完整回答
反对 回复 2016-07-14
  • 8 回答
  • 8 关注
  • 10867 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信