width
设置的是layout viewport 的宽度initial-scale=1.0
自带 width=device-width
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
来源:慕课网
源HTML文件(备份下载):web_flex.html.zip
新版flex布局 和 旧版flexbox布局 对比:
新flex布局 | 旧flexbox布局 |
---|---|
display: -webkit-flex; | display: -webkit-flex-box; |
-webkit-flex: 1; | -webkit-flex-box: 1; |
justify-content: center; | box-pack: center; |
align-items: center; | box-align: center; |
@media screen and (max-width:1024px) {
/* ... */
}
使用媒体查询来适应不同的固定宽度,只会从一组css切换到另一组css, 没有平滑渐变。当没有命中媒体查询时,变现就变得不可控(滚动,换行)。 所以需要百分比布局。
类似第一点,图片也使用百分比。
img {
max-width: 100%;
height: auto;
}
当页面宽度过小时,就需要做出一些处理:
缺点:
优点:
在retina屏幕上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染。
即100*100
的图片,应该使用100dp*100dp
.
例子:
在retina屏幕上渲染图片,1px使用2dp或者3dp渲染。
解决方法:
border: 0.5px; /* 只有iOS8可以用 */
rem = screen.width / 10 或者 rem = screen.width / 20
一般来讲,font-size是不应该使用rem等相对单位的。应为字体应该首先保证阅读的实用性,其次才是排版布局。