媒体查询
@media screen and (max-width:1024px){
#pagewrap{
width:95.5%;
}
#content{
width:62%;
}
#content .article .hr{
width:66%;
margin-left:34%;
}
}
设计点一:百分比布局
仅仅使用媒体查询来适应不同的固定宽度设计,只会从一组CSS到另一组CSS的切换。两种之间的没有任何平滑渐变。当没有命中媒体查询时,表现就会变得不可控制(滚动、换行)。
设计点一:弹性图片
img{
max-width:100%;
思路是:无论何时,都全包在图片的元素宽度范围内,以最大的宽度同比完整地显示图片
设计点三:重新布局,显示与隐藏
当页面达到手机屏幕宽度的时候,很多时候就要放弃一些传统的页面设计思想。力求页面简单,简洁。所以我们必须要以下处理:
1、同比例缩减元素尺寸
2、调整页面结构 布局
3、隐藏多余的元素
注:经常需要切换位置元素使用【绝对定位】,减少重绘提高渲染性能