网页布局及响应式

最近项目整合到一起,整个布局页面样式,五花八门。。然后就做最苦逼的事,改别人的代码。

看了几页代码,只想说能不能把最基础的规范写好。。。。

首先我要说明几点,第一:一个优良的网站,要求结构(HTML),表现(css),行为(Javascript)三者分离,除了必须要写到结构里面的,我可爱的同事把它们写到一页还是内嵌型的。。。这样的代码很不利于后期维护和二次开发, 代码无法压缩到最小,当然影响加载速度了,一般情况下图片也要用png格式而且要压缩到最小;这样才有利于用户快速的打开网站。(这些都是最基本的)

好了,废话不多说了,写写布局和响应式常见的问题。

~~

在网页代码的头部,加入一行viewport元标签

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->

要注意的问题:

1.不使用绝对宽度

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

width: xx%;

2.相对大小的字体

字体也不能使用绝对大小(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)。
  }

3.尽量不设高度,让内容撑开

4.流动布局

各个区块的位置都是浮动的,不是固定不变的。

 .main {
    float: right;
    width: 70%; 
  }

  .leftBar {
    float: left;
    width: 25%;
  }

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

5.绝对定位(position: absolute)的使用,也要非常小心。

时间: 2025-01-14 19:44:11

网页布局及响应式的相关文章

paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54

#-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝对不要使用相对地高度...只使用相对地宽度..特别大的布局上... #----------字体的自适应vw 使用em好像不生效... 使用vw走ok....  font-size: 4vw;   适合320*480-----600*900等... 顺便,要有个vmin,最小字体了.贝儿.太小李看不见.. 手动大小窗口,都能自己适合了.. 作者 老哇的爪子 Attila

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同.所以学习要针对不同的名词有明确的区分意识. 抽空时间,打算学习下display:flex;本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex;有很多内容,能实现很多效果.比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局. 后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景. 静态布局:给页面元素设置固定的宽度和高度,单位用px,

paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

建立map的方式(其实用的是json实现方式) var a = {}; a["key1"] = "value1"; a["key2"] = "value2"; 既然是个map就有检索某个键是否存在的方法,这样写 if ("key1" in a) { // something } else { // something else } 简单的一句话声明map里面的key和value的方式: var a = {'

第九十五节,移动流体布局和响应式布局总结

移动流体布局和响应式布局总结 宽度与高度 区块宽度一般用max-width 最大宽度和百分比,来定义宽度,因为要实现自动缩放 高度如果要自适应,就不需要定义高度,或者定义最小高度 注意:横向的尽量用百分比,如边距等 图片自适应 保证小于图片分辨率的手机,自适应等宽屏幕 图片一定要能够自适应等比例缩放 才能保证布局的 正确性. 方法:将图片的img标签转换成区块,将最大宽度设置为100%,这样图片就会自适应了 img{ display: block; max-width: 100%; } 媒体查询

Bootstrap页面布局5 - 响应式布局(格式)

旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在<style></style>标签中输入如下css3的格式实现: <style> body {background:green;} //注意这里不能写成行内样式,使用CSS样式定制样式 @media (max-width:767px) {body{background:red}

FLEX 网格布局及响应式处理

上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理. 首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构. <div class="grid">     <div class="grid-cell">         1    </div>     <div class="grid-cell">       

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear

如何根据不同设备类型快速地实现网页界面的响应式布局,只需一句代码立马实现。

在学习网页制作的过程中,如何根据不用的设备让网页界面能够显示出最佳的效果,这是让广大初学者为之烦恼的事情,但是今天如果你看了这篇博文,你的忧虑将一扫而光,会让你感受到前端的乐趣. 首先,如何实现这样的布局呢?只需要一句代码就能实现,接下来让我们看一下吧! 当我们在进行代码编写时,我们只需要这样编写: <!DOCTYPE> <html> <head> <meta name="viewport" content="width=device

重温&quot;什么是响应式网页设计?响应式布局的实现原理&quot;

概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式:我们应当向下兼容.移动优先. 背景 PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%.预计到2015年,移动互联网的数据流量将超越P