流体布局:
什么是流体布局?
流体是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载
移动端有两种设计方式:
全屏设计,在 PC 端和 PAD 平板也可以无缝浏览,但图片却会失真。
固屏设计、虽然会留有白边,但图片不会失真。
一般手机分辨率最小的不会小于 320。
采用固屏设计,几乎每一个body里面的父标签都必须加max-width: 6.4rem;
<meta>标签
一般会在head里面增加如下标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
width=device-width//页面大小屏幕等宽
initial-scale=1.0//初始缩放比例,1.0 表示原始比例大小
user-scalable=no//用户是否可以缩放,这里 no 表示不可以。
导航栏
采用全屏100%,position: fixed; top: 0; z-index: 9999;文字不宜太多,容易溢出。
采用单位rem,相对大小
html{
font-size: 625%;
}
在html {}的 CSS 中设置 62.5%相当于 10px,在 Chrome 浏览器却出现偏差。那么统一解 决的方法就是设置 625%,默认是 100px,这样达到全兼容。
布局忽略边框计算
div { box-sizing: border-box; }
页脚和内容之间插入一个div,清除浮动。
.clearfix:after{
content:'';
display:block;
clear:both;
visibility:hidden;
}
媒体查询
/*媒体查询,大于 480px 小于 640px*/
@media (min-width: 480px) and (max-width: 640px) {
#tour h2 { font-size: .26rem; }
#tour h3, #footer, #tour figure,
#tour .info { font-size: .16rem; }
}
其它主要改成百分比形式就可以了。
文本溢出
多行文本溢出,显示省略号。
响应式布局:
什么是响应式布局?
就是一个网站能够兼容多个终端,通过检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式。
响应兼容式CSS 部分,基本是 PC 端移植,并改为流体百分比。
响应兼容式html部分,两个样式都写上,通过媒体查询,响应式隐藏即可。