HTML布局演变：tablevsDiv+CSS&响应式设计,-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_70374250/article/details/134031443

1 Table布局

经典案例：蓝色理想（1）按照设计图的尺寸设置表格的宽高以及单元格的宽高（2）将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。表格的Cellpadding：设置表格中的单元格内容（如：文字等）离单元格边线的距离表格的cellspacing：设置表格中单元格之间的间距（3）针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。（4）单元格中的元素或者嵌套的表格用align和valign设置对齐方式（5）通过属性或者CSS样式设置单元格中元素的样式

弊端：

1. Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

2. Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)

3. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

4. 在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

5. Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)(这会限制你页面设计的自由性。)

6. 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识，会省去你以后大量的时间。)

7. table对对于页面布局来说，从语义上看是不正确的。(它描述的是表现，而不是内容。)

8. table代码会让阅读者抓狂。(不但无法利用CSS，而且会你不知所云)

9. table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

2 Div+CSS布局（静态布局）

静态布局是最为原始的布局方式，没有什么技术性可言，往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

布局特点： 页面上的布局是按最初写代码时候的布局方式进行布局的，常规的pc网站是进行设置了宽度值进行布局的，不会随着pc端的屏幕的大小而变化。

**优点: ** 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的，最让人容易以接受、学习的，没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上，这些官网的设备的尺寸是固定的，这种布局方式往往是最简单的方法。

缺点：不会随着pc端的屏幕大小而变化。

3 媒体查询-响应式布局

案例：映纷创意案例：少数派

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

响应式网站设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

设置meta标签

利用@ media screen实现网页布局的自适应，这是css3中的新功能首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

< meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

width = device-width：宽度等于当前设备的宽度

height = device-height：高度等于当前设备的高度

initial-scale：初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

进入CSS3 Media写法

语法： @media screen and (max-width: 960px){

body{

background: #000;

}

}

这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。

案例一：页面小于960的时候显示

@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}

案例二：页面大于960的时候显示

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

案例三：混合当页面宽度大于960px小于1200px的时候执行

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

注意书写的顺序

注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 } 因为如果是1440,由于1440>768那么你的1200就会失效。所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

不同分辨率的适配情况

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
    #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
    #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}

880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
    #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}

720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
    #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}

440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
    #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}

PC端按屏幕宽度大小排序（主流的用橙色标明）

分辨率	比例	设备尺寸
1024*500		8.7
1024*768	4:3	10.4寸、12.1寸、14.1寸、15寸
1280*800	16:10	15.4寸
1280*1024	5:4	14.1寸、15.0寸
1280*854	15:10
1366*768	16:9(不常见)
1440*900	16:10	17寸仅苹果用
1440*1050	5:4	14.1寸、15.0寸
1600*1024	14:6（不常见）
1600*1200	4:3	15.0寸、16.1寸
1680*1050	16:10	15.4寸、20.0寸
1920*1200		23寸

通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920

兼容所有屏幕浏览器

@media (min-width: 1024px){
  body{font-size: 18px}
} 
@media (min-width: 1100px) {
  body{font-size: 20px}
} 
@media (min-width: 1280px) {
  body{font-size: 22px;}
} 
@media (min-width: 1366px) {
  body{font-size: 24px;}
}  
@media (min-width: 1440px) {
  body{font-size: 25px !important;}
} 
@media (min-width: 1680px) {
  body{font-size: 28px;}
} 
@media (min-width: 1920px) {
  body{font-size: 33px;}
}

横屏竖屏的适配情况

landscape [ˈlændskeɪp] portrait [ˈpɔ:treɪt]

/_ 竖屏 / *@media * screen and (orientation: portrait) and ( max-width: 720px) { 对应样式 } / 横屏 _/

@media screen and (orientation: landscape) { 对应样式 }