刚开始努力有点偏,看到响应式网站去了,其实主要是要用JQuery Mobile

做一个像应用的网站。

JQuery Mobile的教程 http://www.hongkiat.com/blog/build-websites-apps-jquery-mobile-custom-themes/

介绍了怎么自定义颜色主题等等。

利用了遍历的JS框架,就必须忍受默认的CSS带来的束缚。

布局上也不像平时想浮动就浮动。基本上所有元素的属性都是既定的,为了避免冲突,需要用固有布局来改。

比如横向两栏的布局,父容器class ui-grid-a,子容器 ui-block-a,uiblock-b;

垂直列表用data-role="listview"。

最后针对不同设备,还是要用到媒体查询。不过针对手机就不需要像响应式网站做的分辨率那么多种了。

响应式的做法:

首先,CSS和一般的RESET有些不同:

度娘找 响应式布局就会发现百科里面有这些附加设置:
html {
-webkit-text-size-adjust: none;
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 设置图片视频等自适应调整 */
img {
max-width: 100%; height: auto; width: auto\9; /* ie8 */}
.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 – 用户是否可以手动缩放

另外,在阮一峰老师博客看到图片的详细设置:

 img { max-width: 100%;}与上面相同

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

  img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

  img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

  img { -ms-interpolation-mode: bicubic; }  //这是上面没有提到的。

把CSS都设置好了以后,对应一些不同尺寸的屏幕,使用Media Query编写CSS。

常见的几个尺寸有:

@media screen and (max-width: 1140px) and (min-width: px){#social-box{display:inline}#social-box-vert,#wallpaper{display:none}}
@media screen and (max-width: 1023px) and (min-width: px){.side-home{margin-left:14px;padding-right:0px}#home-right{border-right:none;border-left:none;margin-left:14px;padding-right:0;padding-left:0px;width:300px}}
@media screen and (max-width: 767px) and (min-width: px){#home-right{border-right:none;padding-right:none}}
@media screen and (max-width: 599px) and (min-width: px){#home-right{border-right:none;margin-left:0;padding-right:0;width:420px;border-left:none;padding-left:0px}}
@media screen and (max-width: 479px){.side-home{margin-left:0;margin-top:20px;padding-right:0px}#home-right{margin-bottom:0px;border-right:none;margin-left:0;padding-right:0;width:300px;border-left:none;padding-left:0px}} @media screen and (min-width: px){#gameoftheday{display:none}}

实际做smartphone的时候分得很细,可是320这一档适用的机型是在太多了,iphone5,4,3还有安卓,屏幕表现还不一定一样!

/*pad*/
@media screen and (min-width: 769px){}
/*horizontal iphone5 568x320*/
@media screen and (max-width: 768px) and (min-width: 481px){}
/*horizontal iphone4 480x320,large android*/
@media screen and (max-width: 480px) and (min-width: 380px){}
/*=====vertical iphone5 320x568,vertical iphone4 320x480 ,Android=====*/
@media screen and (max-width: 379px) and (min-width: 320px){}
/*-----small Android-----*/
@media screen and (max-width: 319px) and (min-width: 240px){}
/*further small*/
@media screen and (max-width: 239px){}

媒体查询也可以用高度,不过不常见,手册在:http://www.w3chtml.com/css3/properties/madia-queries/height.html

具体使用比较有讲究,来自ADOBE的文章http://www.adobe.com/cn/devnet/dreamweaver/articles/introducing-media-queries.html

( width , height , device-width , device-height , 和 orientation ) 是最有用的。您可以为大部分功能添加 min- 和 max- 作为前缀,以表示最小和最大值,比如 min-width 和max-width 。表 1 中的“最大值/最小值”列表是哪些功能可通过此方式修改。

width、device-width和viewport

媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机,它们之间的区别很容易理解:width 和 height指浏览器视区的尺寸,而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器,所以width 和 height是您需要使用的度量方法。

移动浏览器将填满可用的屏幕,所以您可能期望width和device-width是相同的。不幸的是,并不总是这样。大多数智能电话(包括Android、iPhone和Windows Phone 7)将width设置为大约1,000像素宽的标称视区(在iPhone和iPod touch中,它为980像素;Windows Phone 7使用1024像素)。图4展示了iPod touch通常如何显示前面插图中的示例页面。
即使附加到页面上的样式表使用媒体查询,依据min-width 和 max-width 的值来提供不同样式,iPod touch会忽略这些样式并显示桌面版本,因为它的视区被视为980像素宽。

更让人混淆的是,iPhone、iPod touch和iPad在计算宽度时不会考虑方向,而其他设备会。

幸运的是,这种混淆情形有一个简单的解决方案。苹果公司设计了一个新的<meta>标记,它已被其他移动设备制造商广泛采用,已合并到可能会被万维网联盟(W3C)批准的规范中。要为支持媒体查询的所有设备提供公平的机会,只需向每个网页的<head>添加以下这行代码:

<meta name="viewport" content="width=device-width, initial-scale=1">

这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度。而且,它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样,您可以在媒体查询中安全地使用width,因为您知道它的用途与您所想的相同。

注意:许多移动设备(最显著的就是iPhone 4和iPad 2)拥有高分辨率的显示屏,具有比桌面或平板显示器高得多的像素密度。这不会影响您在CSS中计算像素大小的方式。CSS规范要求,如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大,浏览器应该重新调节像素值。一些开发人员现在将像素度量方法称为CSS像素。

另外有个使IE6,7,8兼容媒体查询CSS的JS  http://code.google.com/p/css3-mediaqueries-js/

<!--[if IE]>
<script src="js/css3-mediaqueries.js" type="text/javascript"></script>
<![endif]-->

各种表单组件可以用 http://jquerymobile.com/

除了用CSS设置图片大小,还可以用JS:

var imgSizer = {
Config : {
imgCache : []
,spacer : "/path/to/your/spacer.gif"
} ,collate : function(aScope) {
var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
if (isOldIE && document.getElementsByTagName) {
var c = imgSizer;
var imgCache = c.Config.imgCache; var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].origWidth = images[i].offsetWidth;
images[i].origHeight = images[i].offsetHeight; imgCache.push(images[i]);
c.ieAlpha(images[i]);
images[i].style.width = "100%";
} if (imgCache.length) {
c.resize(function() {
for (var i = 0; i < imgCache.length; i++) {
var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);
imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";
}
});
}
}
} ,ieAlpha : function(img) {
var c = imgSizer;
if (img.oldSrc) {
img.src = img.oldSrc;
}
var src = img.src;
img.style.width = img.offsetWidth + "px";
img.style.height = img.offsetHeight + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
img.oldSrc = src;
img.src = c.Config.spacer;
} // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
,resize : function(func) {
var oldonresize = window.onresize;
if (typeof window.onresize != 'function') {
window.onresize = func;
} else {
window.onresize = function() {
if (oldonresize) {
oldonresize();
}
func();
}
}
}
}

imgSizer.js

addLoadEvent(function() {
    var imgs = document.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
  });

基本上也是IE7需要用:

<!--[if lte IE 7]><script type="text/javascript" src="site/imgSizer.js"></script>
<script type="text/javascript">
window.onload = function() {
imgSizer.collate();
}
</script><![endif]-->

暂时资料准备到这里,具体做了以后再总结一个完备的CSS reset,这是一开始做打算用的版本:

/* reset */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:}
html{font-size:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-ms-text-size-adjust:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0px; padding:0px; font-family:'微软雅黑', Meiryo, "MS Pゴシック", Hiragino Kaku Gothic Pro, sans-serif;}
table { border-collapse:collapse; border-spacing:;}
fieldset,img { border:0px; margin:; padding:; vertical-align:bottom;}
img,object{max-width:100%; height:auto; width:auto\9; /* ie8 */ *width: 100%;/* ie6 */-ms-interpolation-mode: bicubic;}
.video embed, .video object, .video iframe {width:100%; height:auto;}
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}
ol, ul, li, dl, dt, dd { list-style-type:none outside none; _list-style-type:none; }
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:;}
a{ text-decoration:none; cursor:pointer;}

除了麻烦的媒体查询,就注意一下宽度尽量用百分比,字号用em,坚持浮动布局就可以了。

附上公司国庆休假安排:

中秋节

19号至21号休息,22号上班

国庆节

29号上班,1号开始至7号休息,10月12号上班

SmartPhone手机网站的制作的更多相关文章

  1. 帝国cms制作手机网站

    1.操作前,我们需要先对网站数据库进行备份. 接下来我们添加手机站的模板组.点击"模板", 选择"模板组管理"中的"导入/导出模板组",然后 ...

  2. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  3. Phpcms V9手机门户设置教程:怎么用PC V9做手机网站

    一.在PHPcms V9管理后台设置手机门户 1.1.开启手机网站.位置:模块 >手机门户 > 添加手机站点,具体设置可参照截图: 填写站点名和LOGO文件相对位置,绑定用于手机网站的二级 ...

  4. 3种方法判断手机浏览器跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我 ...

  5. 支付宝PC即时到账和手机网站支付同步

    前几个月做了一个旅游网站,有PC站和手机站,涉及支付宝支付功能. 要求:PC站下的单,用户用手机登录也能支付;同理,手机站下的单,PC端登录也能支付. 附支付宝开放平台网址:即时到账 ,手机网站支付. ...

  6. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

  7. 如何在电脑上测试手机网站(补充)和phonegap

    颜海镜 介绍了专业人士精准测试手机网站的经验 http://www.cnblogs.com/yanhaijing/p/3557261.html, 因为太专业了,稍显复杂和琐碎,这里我介绍下我一直关注的 ...

  8. 分析app和wap手机网站的不同

    随着手机3G.4G时代的到来,手机功能的越来越强大,手机App的市场是越来越火爆,时代在更新随之而来的事物也在更新,不能更上时代的步伐是落后的表现,所以不仅仅是手机APP在完善,手机网站WAP也在不断 ...

  9. 自己动手搞定支付宝手机网站支付接口 FOR ECShop

    支付宝WAP网站版本的支付接口网上整合的比较少,看到很多网站在卖,顿觉无语. 主要是得自己查看支付宝官方提供的SDK中的开发文档. 支付宝sdk下载地址:https://doc.open.alipay ...

随机推荐

  1. 三大框架常遇的错误:hibernate : object references an unsaved transient instance

    hibernate : object references an unsaved transient instance 该错误是操作顺序的问题,比如: save或update顺序问题---比方学生表和 ...

  2. header的用法小结(转)

    php header()函数的具体作用是向客户端发送一个原始 HTTP 标头[Http Header]到客户端. 标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的 ...

  3. CMake 简单介绍 图

    http://tech.uc.cn/?p=914     CMake特点 CMake需要用户用CMake规范的语法编写CMake脚本,该语法简单易用,入门极其顺手 原生支持 C/C++/Fortran ...

  4. 简单回顾C++中的字符串

    C++中有两种字符串形式,一种是C语言字符数组,一般可以使用 char*指针来操作它:另一种是C++中基于标准库的string类型,这算是更高层次的抽象数据类型. 主要讨论一下string类型,既然是 ...

  5. php 编译安装的一个 configure 配置

    yum -y install libmcrypt-devel mhash-devel libxslt-devel libjpeg libjpeg-devel libpng libpng-devel f ...

  6. node基础再现--module.exports 和exports

    实际上,最最基础的方法,最最原始的方法是module.exports,至于exports,是为了方便书写才出来的,应该说,module.exports 包含exports,所工作的范围更加的广泛! m ...

  7. mysql 安装-编码

    mysql的安装过程相对较为简单,在这里就不阐述,我想说的问题是,关于编码的安装, 在安装到达'Please select the default character set'的时候,选择'Manul ...

  8. (转)[开发笔记]-js判断用户的浏览设备是移动设备还是PC

    <script type="text/javascript"> function browserRedirect() { var sUserAgent = naviga ...

  9. Deep Learning学习随记(二)Vectorized、PCA和Whitening

    接着上次的记,前面看了稀疏自编码.按照讲义,接下来是Vectorized, 翻译成向量化?暂且这么认为吧. Vectorized: 这节是老师教我们编程技巧了,这个向量化的意思说白了就是利用已经被优化 ...

  10. openURL的使用方法

    openURL的使用方法 openURL的使用方法: view plaincopy to clipboardprint? [[UIApplication sharedApplication] open ...