首页 > 代码库 > css3整理(四)
css3整理(四)
响应式设计
弹性盒模型、百分比宽高、媒体查询
适用什么?
对于重内容的网站,例如形象展示,则比较适合使用响应式web设计
不适用什么?
对于重功能的网站,如电子商务,门户类,则更推荐使用独立移动网站
原因:功能多,页面复杂, 页面体积变大,消耗流量,不如直接做一个轻量级的h5
Web app,便于分离以及定制
(1)使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
(3)设置Web App的状态栏(屏幕顶部栏)的样式
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
实际浏览器的布局宽度:
(1) 如果没有设置viewport width=device-width; 此时布局宽度就是980px;(浏览器统一缩放的);
max-widht指展示的最大宽度,一般是浏览器窗口宽度。
max-device-width是指所展示使用的设备支持宽度,如一般电脑分辨率1280px,手机设备支持展示宽度(安卓有种宽度如360 ,480)等.
(2) 如果设置了,布局宽度就是 ,设备的物理像素/window.devicePixelRatio 。
直接通过chrome 手机浏览器工具查实际浏览器布局宽度
示例:
@media screen and (min-width: 320px) and (max-width:1024px){
div:after{
content: "-大于320px小于1024px";
}
}@media all and (min-width:1024px) {
div:after{
content: "-大于1024px";
}
}@media screen and (orientation:landscape) {
/*横屏 (宽度>高度) */
div{
font-size:100px;
}
}@media screen and (orientation:portrait) {
/*竖屏 (高度>宽度) */
div{
font-size:30px;
}
}
判别浏览器跳转
if(navigator.userAgent.indexOf("iPhone")>-1){
alert("iphone");
//通过动态创建link 标签引入我们css。
//document.createElement("link")
}else if(navigator.userAgent.indexOf("Android")>-1){
alert("android");
}
css3整理(四)