css网页内容自适应，css自动适应屏幕大小

关于一个HTML/CSS自适应的问题

min980px.css文件里要用百分比的方式来布局，这样布局就自适应了，另外字体的大小也要用自适应才行，如大小用em做单位。当布局缩小时，布局也有相应的改变，如隐藏一些不大重要的内容。

也不能使用具有绝对宽度的元素。这一条非常重要。

我们就可以利用这个特性，实现移动端的宽高等比自适应容器。

谢谢各位大神了 回复讨论(解决方案)width：100% js控制的吧 宽度自适应有2种方式一是用百分比代替具体的多少 px二是使用JS判断当前窗口的宽度，再去分配宽度。

你可以设置div的最高高度(max-height)为窗口的高度，滚动条设置为自动：overflow：auto，就可以实现所需。

中部（middle）DIV高度根据屏幕高度，自适应充满，宽度100%；用纯DIV+CSS实现，不采用脚本计算高度的方式；调整浏览器大小时，中部DIV能随着屏幕高度自适应。

相关问答

Q1: 设计自适应网站页面时应注意哪些事项

注意视觉效果 设计Web页面时，一定要用640×480和800×600的分辨率来分别观察。许多浏览器使用640×480的分辨率，尽管在800×600高分辨率下一些Web页面看上去很具吸引力，但在640×480的模式下可能会黯然失色。

自适应网页设计的时候尽量少用Flash动画，尽管使用Flash动画来进行页面设计会更好一些，但是对于搜索引擎来说，这点非常重要。

做网站都知道，做自适应的网站有两大难点，一是设计难，二是实现难。如果想要两者完美的结合，就需要设计和前端多沟通，这样才能做出无论pc端还是移动端都好看的网站。对于设计来说一般需要注意以下两点。设计风格扁平化。

在设计网站主页布局时，需要注意以下方面： 页面清晰：要有整体清晰明了的页面布局，以便让用户快速地找到所需的信息。 用户导航：确保页面上有良好的导航，引导用户顺利地浏览整个网站。

合理的页面版式 设计网页时，一定要注意页面版式的合理性。一个合理的版式和让人一目了然的网页能够给人带来舒适的感觉，并且会让人愿意花时间去了解。注重版式的设计，不要板块冗杂；页面版式的搭配，注重协调简洁。

Q2: 网站怎么做到自适应网页?

关于网站如何做到自适应网页，可根据如下操作：首先，在网页代码的头部，加入一行viewport元标签。

想要网页宽度自适应，需要把网页元素宽度设置为百分比，还要在网页头部加上代码：。图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：img{ width：100%； max-width：100%；}。

第一个遇到的就是网页大小自适应的问题。目前比较常用的方法有：？ 首先要让页面大小铺满屏幕又不能溢出。

Q3: CSS如何让iframe实现自适应高度的效果

1、iframe自适应高度设置，iframe自适应高度和宽度相信很多小伙伴还不知道，现在让我们一起来看看吧！ 在文件夹里创建两个html文件，一个“index”一个“iframe”。 在index中添加一个iframe标签，直接嵌入iframe页面。

2、传统做法大致有两个：方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

3、在一个文件夹中创建两个HTML文件，一个“index”和一个“iframe”。将iframe标记添加到索引中，并将其直接嵌入到iframe页面中。将两个具有固定高度的div内容添加到iframe页面。

Q4: css3怎样实现屏幕自适应?

1、手机、平板设备屏幕尺寸众多，宽度不一，写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活，如果你css不熟练的话最好先别折腾这块，把基础练好了来。

2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

3、在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone 6 的布局视口宽度为 375， iPhone6 Plus 布局视口的宽度为 414。

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

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

css网页内容自适应的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css自动适应屏幕大小、css网页内容自适应的信息别忘了在本站进行查找喔。