特点:手机,ipad,PC 所有的终端设备上完美展示;
核心点:
//PC端样式调整
@media screen and (max-width: 1024px){
}
//平板的宽度
@media screen and (max-width: 980px){
}
@media screen and (max-width:720px){
}
@media screen and (max-width:640px){
}
//手机端
@media screen and (max-width:320px){
}
当设备符合条件时就会自动调整
响应式设计中相关参数:
1)媒体类型
① screen ---屏幕
② print ----打印机
③ handheld --- 手持设备
④ all ---通用
2)媒体查询参数
① width---视口宽度
② height---视口高度
③device-width--- 设备宽度
④ device-height --- 设备高度
⑤ orientation----检查设备处于横向(landscape)还是 竖屏 (portrait)
设计点1: 百分比布局
设计点2 : 弹性图片
img { width:100% ;height: auto }
设计点3: 重新布局,显示与隐藏
当页面达到手机屏幕宽度时候,就要放弃一些传统页面设计。比如: 同比例缩减元素尺寸,调整页面结构布局,隐藏冗余的元素。
注意: 经常需要切换位置元素使用‘绝对定位’,减少重绘提高渲染性能;
响应式设计问题: 当一个移动设备访问一个响应式页面时就会将所有样式下载,但是这些都是冗余的。
但是相对有优缺点,优点: 减少重复开发,缺点: 性能不是最优
关于移动设备上CSS样式处理
1)高清图片:(retina屏幕)
在移动web页面上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染,即是100*100的图片,应该使用100dp*100dp;
width:(w_value/dpr)px; height:(h_value/dpr)px;
2)1px 边框
解决方案:
① border: 0.5px (仅仅 ios 8 支持)
② 利用scaleY(0.5)
li { position: relative }
//每个li的下面都加一条1px 边框
li+ li:before {
position: absolute;
left: 0; top:-1px;
content: ‘‘;
width: 100%;height: 1px;
border-bottom: 1px solid #eee;
-webkit-tranform: scaleY(.5);
}
3)
3.1)单行文本溢出(标题类使用居多)
overflow: hidden; //内容超出隐藏
white-space: nowrap; //文本不换行
text-overflow: ellipsis; //文本超出时显示省略号
3.2)多行文本溢出(详情介绍使用居多)
display: -webkit-box !important; //伸缩布局
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2; //从第几行截断
重点来了!!!!!
相对单位REM
为了使用各大屏幕的手机,px相对于死板,不能根据尺寸的大小而改变,使用相对单元更能体验页面的兼容性。
em 是根据父节点 的font-size 为相对单位;(em在多层嵌套下难以使用)
rem 是根据 html 的font-size 为相对单位; (更能作为全局统一设置的度量单位) .
在使用rem时,基值如何设置?
方案1. screen.width/10
//默认320px
html { font-size: 32px }
//iphone 6
@media screen and (min-width:375px){
html{ font-size: 37.5px }
}
//iphone 6 plus
@media screen and (min-width:414px){
html{ font-size: 41.4px }
}
方案2:
rem = screen.width/20 (这里考虑到dpr)
不适用rem 的情况: font-size