html页面设计成占满屏幕,关于html页面布局

之前做的一个网站，结果今天这几天测试发现在19寸屏幕和手机屏幕上页面布局全乱了，今天刚刚改好，发现还是自己经验不足，做个小总结。

一、div布局要固定宽高

当div不设计长宽高而是自动由内部控件”撑“尺寸的话，我们发现当屏幕缩小时其布局会变乱，(推测原因可能和使用的bootstrap框架的自适应有关)，于是我们将所有的宽度设死，这样当屏幕缩小或改变屏幕尺寸时虽然不会自动适应当前窗口大小，而是出现滚动条，但起码能保证不会出现之前的布局错乱的现象。(不过我相信应该能有更优的解决方案)

二、整体页面宽度设定的小细节

之前看各种网站都发现一个小细节，很多网页的主体不会占满整个窗口，在左右两边会留下空位，内容写在中部。

根据这次网站开发的经验，我感觉到了这么做的好处(肯定不是所有网站都是这个原因)。

举个例子，假设你将网页的总体宽度设死，设置成1520px(写死的原因是上一条)，那么你在15寸笔记本上看可能会刚刚好占满屏幕。但如果你在14寸电脑上看，就会发现超出了屏幕(因为14寸屏幕的宽度小于1520px)，此时底部就会出现滚动条，而在19寸屏幕上可能又会占不满屏幕的现象。

此时我们的解决办法就是将整体的主体宽度设死为一个比较小的值(比如1170px)并水平居中，而两边”自动补白“。这样就可以保证在各种尺寸的显示器上不会出现网站内容超过窗口或小于窗口的现象。原因是此时的主体宽度小于任何一个尺寸的屏幕自然就不会超出，而且居中显示，那么即使没有占满屏幕也不会显得很奇怪。

三、网页头部布局的小细节

虽然像第二条说的，在很多网页上主体都是居中且两边补白，但很多网页的头部都是宽度占满屏幕的。这次修改网页我们也发现了，最终的解决方案其实是头部主体依然用第二条的解决方案(小尺寸宽度且居中)，但两边不是补白而是补”背景色“。如现在我所处的这个的写博客页面，它的头部背景颜色就和主体不一样，是黑灰色。要是让我设计我会将头部内容尺寸固定居中，两边补灰黑色，制造出一种占满屏幕宽度的”假象“。

转载于:https://www..com/red-code/p/5288644.html

html页面设计成占满屏幕,关于html页面布局相关推荐

手机页面图片占满屏幕问题
在做项目过程中遇到的问题: 问题描述:1.图片当背景图插入的时候,iPhone5里图片占满屏幕,iPhone6和iPhone6plus 底部有空白: 2.图片直接用img方式插入的时候,iPhone ...
html段落只占左边一半,word页面显示只占整个屏幕的一半,怎么回事
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:word页面显示只占整个屏幕的一半,怎么回事回答:页面的显示大小问题,你可以按住键盘ctrl键不放,然后滚动鼠标滚轮,既可以放大缩小 ...
微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
antD布局不能占满屏幕问题
当使用antD布局组件时会出现无法占满屏幕情况,如下: 在css文件中加入: .layout{min-height:100%; } 注意:如果加入height:100%(而非min-height:10 ...
如何用css实现div高度自适应占满屏幕
如何用css实现div高度自适应占满屏幕不能使用准确的px值,应该用%作为尺寸的单位. 在样式表中将html,body的高度height设置为100% 在要需要站满屏的div设置width:100% ...
CSS查漏补缺（一）—页面内容不足铺满屏幕高度和有滚动条时，footer始终保持底部显示
记录一个项目中经常会用到的技巧,footer区(比如版权信息)要始终居于页面底部.如果用fixed定位显然不可取,因为要保证页面高度大于屏幕高度时,footer区要跟随着页面滚动保持在底部,如下图: ...
自定义Dialog宽度占满屏幕
一.自定义Dialog继承Dialog public class MyDialog extends Dialog { 二.为Dialog设置样式在style中建立新样式继承 @android:sty ...
vue页面换成手机适配屏幕
最快的办法就是把index.html中的<meta>注释掉,这也是最简陋的做法
css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{position: relative;margin-left: 24px;margin- ...

html页面设计成占满屏幕,关于html页面布局

html页面设计成占满屏幕,关于html页面布局相关推荐

最新文章

热门文章