热门关键字:
jquery > jquery教程 > jquery教程 > js制作手机主题

js制作手机主题

245
作者:管理员
发布时间:2021/5/26 18:48:02
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4807
  刚开始努力有点偏,看到响应式网站去了,其实主要是要用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
友荐云推荐