刚开始努力有点偏,看到响应式网站去了,其实主要是要用JQuery Mobile
做一个像应用的网站。
JQuery Mobile的教程?
介绍了怎么自定义颜色主题等等。
利用了遍历的JS框架,就必须忍受默认的CSS带来的束缚。
布局上也不像平时想浮动就浮动。基本上所有元素的属性都是既定的,为了避免冲突,需要用固有布局来改。
比如横向两栏的布局,父容器class ui-grid-a,子容器 ui-block-a,uiblock-b;
垂直列表用data-role="listview"。
最后针对不同设备,还是要用到媒体查询。不过针对手机就不需要像响应式网站做的分辨率那么多种了。
响应式的做法:
首先,CSS和一般的RESET有些不同:
度娘找?响应式布局就会发现百科里面有这些附加设置:
html?{
-webkit-text-size-adjust:?none;
}
article,?aside,?details,?figcaption,?figure,?footer,?header,?hgroup,?menu,?nav,?section?{
display:?block;
}
img?{
max-width:?100%;?height:?auto;?width:?auto\9;?}
。video?embed,?。video?object,?。video?iframe?{
width:?100%;
height:?auto;
}
最后要注意的是在页面的头部<head></head>之间加上下面这句∶
<meta?name=“viewport”?content=“width=device-width;?initial-scale=1.0”>
meta?viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
参数设置∶
width?–?viewport的宽度
height?–?viewport的高度
initial-scale?–?初始的缩放比例
minimum-scale?–?允许用户缩放到的最小比例
maximum-scale?–?允许用户缩放到的最大比例
user-scalable?–?用户是否可以手动缩放
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery