HTML基础篇--网页布局

HTML基础知识

一、布局种类？

  1、静态布局（static layout）固定的宽和高

  2、自适应布局 （adaptive layout）为不同屏幕定制不同的布局，在每个页面中，元素不随着窗口大小而改变。

  3、流式布局 （liquid layout）只有一套布局，页面随着窗口大小而改变。

  4、响应式布局（responsive layout）为不同屏幕定制不同的布局，同时在每个布局中应用流式布局，即页面元素宽高随着屏幕调整而自动适配。

二、流式布局？

  1、定义：只有一套布局；页面元素随着窗口大小而改变；通俗的讲就是百分比布局，包含width百分比和定位百分比；用em/rem代替px。

  2、百分比的使用：尺寸百分比 width： 20%；位置百分比 top： 50%；保留小数点后5位 3.14159%。

  3、单位：em 全拼element；em的值并不是固定的；em会继承父级元素的字体大小；使用em好处是设置段落间隙时可以保证空隙为一行。rem   font size of the root element 根字体大小，其大小继承于html标签。

三、响应式布局？

  1、定义：为不同屏幕定义不同布局；同时在每个布局中应用流式布局，即元素宽度随着屏幕宽度调整而自动适应；使一个网站能兼容多个终端而不是每个终端做一个特定版本；这个概念是为了解决移动互联网浏览而诞生的。

  2、为什么需要：响应式布局可以为不同终端的用户提供更加舒适的页面和更好的用户体验  ；随着目前大屏幕移动设备的普及，可以用“大势所趋”来形容。

  3、如何实现：媒体查询--通过不同的屏幕大小定义不同的样式；

                媒体查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件；

                媒体查询的大部分媒介特性都由min和max用于表达：大于或等于和小于或等于；

                在link中使用@media：<link rel="stylesheet" type="text/css" media="only screen and (max-width:500px)" href="link.css">；

                样式表内嵌套@media：@media screen and (max-width:500px) and (min-width:400px) {  div{}   } screen 代表电脑屏幕、智能手机、平板电脑；媒体查询还可以用于判断手持设备的方向。

四、viewport的使用？

  1、手机有不同的分辨率，不同的屏幕大小，如何使我们开发的应用或页面大小能适应各种高端手机使用？viewport可以实现这一点。

  2、用法：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> : 

  3、解释：width=device-width 设置宽度为屏幕宽度；

                maximum-scale=1.0 设置最大缩放比例（0.25~10.0）；

                minimum-scale=1.0 设置最小缩放比（0.25~10.0）；

                user-scalable=no 禁止用户捏合；

                width=device-width  height=device-height 设置宽度（高度）为屏幕宽度（高度），可以设置一个固定值但是尽量不这么使用，设置高度很少使用；

                initial-scale=1.0 设置初始化的缩放比例；

                maximum-scale=1.0 设置最大缩放比。

  4、在Android还支持target-densitydpi。

转载于:https://my.oschina.net/GodH5/blog/645601