如何解决pc端不同分辨率显示的内容是一样的
就是做好的一个网站，我电脑上的分辨率是1920*1080的，我希望在各个分辨率上我的内容都可以看得到，适应各个分辨率
小小孩～浏览 10873回答 8
8回答
-
blovetu
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之间的区别再用 -
宇xixi
有3种方法：1、后面设置背景，然后内容主要集中在中间的1000像素以内，现在浏览器很少小于1000像素了。就算缩放窗口也不会乱掉。2、全屏内容的，先想好宽高比，在用js获取浏览器宽度，然后根据宽度计算高度，实现动态大小（宽高比一般是固定），这时候我一般会设置个最小宽度（min-width）限制。var $width = parseInt($(window).outerWidth());一般我用这句话获得浏览器宽度（jQuery的）。3、HTML5+CSS3里面有个Media Queries这个可以去搜索了解下，慕课里就有 -
老板请与我联系
meta：vp 按tab建 内容修改自适应 -
swust_li
宽度可以百分比设置；2.@media媒体查询 -
慕仔5033622
根据ui图，width使用百分比，设置最小宽度就行了，这样自适应不同分辨率。 -
茫海
这就是现在流行的响应式设计，你可以查一下这个概念 -
nickylau82
首先，你要想清楚，是不同分辨率显示的内容是一样的？还是不同分辨率显示的内容是不一样的内容一样的很简单，布局全部用固定的长度即可。这样唯一的问题就是在小分辨率的屏幕上会有横向和纵向的滚动条。或者在大屏幕上看太小。。内容不一样就用自适应布局和rem即可。 -
DangCode
如果时pc端不用适应各个分辨率 直接把网站弄成国定的就行了
随时随地看视频慕课网APP
Html/CSS