如何 让 web 页面 手机web前端自适应js 手机端

来源：蜘蛛抓取(WebSpider) 时间：2016-11-25 09:10 标签： 手机端页面自适应
对于html5移动端网页编写CSS网上有很多介绍的文章，但在实际使用过程中还是会纠结.
网上的资料太多，且大多都是技术介绍型，特别是针对android上，网上写的各种麻烦，各种复杂，各种不接地气儿...
我在做移动端网页时，总是和美工设计的页面有出入，主要还是由于双方对移动端HTML5实现页面还了解还不够。&
今天就研究一下各大互联网公司对于移动端页面的处理方式。 主要研究对象：BAT(度娘，阿狸，企鹅)这几家的移动端网站或webapp 主要研究点：viewport的设置，字体的设置，图片原始宽高设置
汝甚吊，令尊知否？
&咦？target-densitydpi呢？
网上有老复杂的计算，针对不同的屏幕分辨率，通过公式计算出不同结果再用JS输出到viewport上，各种云云，&我只想说：汝甚吊，令尊知否
google现在也已经不建议使用target-densitydpi这一属性，webkit中已移除了，请看这里
现代移动端网站的最佳实践
&我看了BAT的移动端页面中，现在是没有target-densitydpi这个东西了。
最佳实践：
1、在viewport中将width设置为device-width,&如：
&meta name=&viewport& content=&width=device-width&&
2、并且将网页设计成自适应方式
先有再优才是王道
CSS中关于分辨率宽度设置：
宽度可以使用320px为标准，图片宽度可以以640px为标准。
这样一方面兼容了低分辨率的低端机，一方面兼容了高分辨率的高端机，缺点是可能会浪费些流量，但开发效率上来讲那是极好的，要保证。
字体单位设置
几个网站中大概使用了以下几个单位
Fontsize单位：px,&em,&%,&rem
只有淘宝首页使用了rem这个单位，果然是淘宝的UED比较喜欢尝试新的东西，这个单位是CSS3中新加入的，结合了em与px的优点，摒弃了em与px的(不易操控)缺点
关于字体单位详细介绍可以参考这片文章
Viewport中的initial-scale值
除淘宝首页的initial-scale设置了0.5，iphone4下相当于640宽度分辨率。
其它的initial-scale均是1.0的设置，即iphone4下320宽度的分辨率，包括淘宝内页或则其内部的天猫，微淘等频道或产品。
各移动端网站截图说明
以下是各移动端网站页面initial-scale值、字体、间距等
0.5缩放，所以它的边距设置的是24px但实际视觉上看到的像素是12px
淘宝聚划算频道
腾讯QQ官方
我只是简单的对BAT巨头们的移动端网站，在chrome浏览器debug模拟器的查看了它们相应的HTML及CSS
对于移动端页面布局方面我应该也算是新手，新手上路... 大家多躲躲我,免得追尾了。
我水平有限，此文仅供参考，欢迎讨论
========================================================主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
一只文艺范的软件攻城狮，Keep Learn，Always.
人生得意须尽欢，莫使金樽空对月。
本人热爱编程，有着很强的兴趣，做事认真，对待项目任务有很强的责任心.
以前买过腾讯云centos服务器，自己搭建java环境，将自己编写的网上商城小项目发布在服务器上，通过域名绑定ip可以成功访问，
平时自己也用网络编程socket套接字，然后结合Thread线程做过聊天系统，用链表的方式做过贪吃蛇，坦克大战游戏。
?熟练运用Eclipse/MyEclipse在Window下进行Java软件开发
?熟练运用MySQL、SQLServer等数据库技术
?熟练运用Struts2、Hibernate、Spring、Spingmvc、Mybatis框架进行web开发
?熟悉Tomcat等主流服务器了解jetty服务器
?熟悉XML、HTML、Servlet、JSP、FreeMarker、JavaScript、AJAX、Jquery，DOM了解CSS+DIV等前端技术
熟悉Linux下的基本命令操作
?掌握SVN版本管理的使用以及nodeJS的模板引擎 jade
?掌握MVC，proxy，chainofResponsibility，Adapter，factory等设计模式的思想
?掌握maven，webService，activiti工作流的使用
?掌握easyui，Bootstrap等前端框架的基本使用
掌握java反射调用，FIFO,topK等算法
了解nodeJS，Jfinal，JPA用纯CSS实现自适应布局表格
以手机、平板等移动设备为平台的浏览行为变得越来越平常，甚至有些人叫嚣PC将死。虽然说的有些夸张，但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要。这种网页布局就是“”(有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化)。这种布局的特点是使用CSS媒体查询语句(@media screen and (...) )，能根据页面宽度，让页面布局自动做相应的调整，而不是采用传统的做法，几种不同的尺寸就做几个相适应的页面。
今天要说的是自适应布局技术中的一个难题，就是，如何让table元素也能表现出自适应性。按HTML5的说法，table是一个不鼓励使用的HTML标记，但现实工作中，我们避免不了的偶尔会用到它。那么，怎样让一个传统的表格也表现出自适应性呢？
网上有很多种解决方案，最常见的是配合JavaScript。里给出了一个用纯CSS实现的，但它需要将一些业务数据写在CSS里。而本文这将提到的一种方法也是用纯CSS实现表格的自适应布局，而且CSS只负责表现，不牵涉业务逻辑和数据。
假设一种需求，用一个表格来展示付款数据。下面是我们使用的表格和数据：
&th&支付&/th&
&th&日期&/th&
&th&金额&/th&
&th&周期&/th&
&td data-label="支付"&支付 #1&/td&
&td data-label="日期"&02/01/2015&/td&
&td data-label="金额"&$2,311&/td&
&td data-label="周期"&01/01/2015 - 01/31/2015&/td&
&td data-label="支付"&支付 #2&/td&
&td data-label="日期"&03/01/2015&/td&
&td data-label="金额"&$3,211&/td&
&td data-label="周期"&02/01/2015 - 02/28/2015&/td&
借助伪元素和自定义属性
我们将借助的力量。通常， 它们用显示图标类的内容，比如一个箭头，提示，或文字图案(icon)。它的另外一个神奇的功能是元素属性值显示到HTML内容里，content: attr(data-label)，放在before/after伪元素类里。沿着这个思路，我们就能够让table在PC端表现成网格效果，而在小屏的手机端表现成流式布局。
我们暂以600px为小屏幕大屏幕的分界点，下面的CSS使用媒体查询语句，在小于600px宽的屏幕上，用CSS将td上的属性值取出来，放到内容区显示。
@media screen and (max-width: 600px) {
table td:before {
content: attr(data-label);
text-transform:
font-weight:
在大屏幕上的显示效果是这样：
而到了手机设备上，变成了这样：
下面是一个实际效果演示页面，请调整页面窗口的宽度，当可视区域的宽度小于600px时，会触发自适应布局设置的条件，表格变成流式布局：
你也可以分别在PC和手机上分别测试这个网页。
完美的实现了自适应布局的效果。
相关文章：
扫一扫二维码分享：如何解决页面自适应分辨率 - ITeye问答
有如下几种分辨率
PC:
;
;
;
;
;
PAD:
;
;
PHONE:
960*640;
;
;
;
最近开发一个项目时,要求能在移动端和pc端都能使用,我在页面都加入了响应式
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
而且我吧所有的px都改成了%,不用固定的像素,改为百分比,我的电脑是的,但是用别的电脑或者设备登陆使用的话,布局就全乱了,怎么解决这个问题啊,我不可能为每一个分辨率 都做一套页面吧.
先把CSS关闭了，在各种分辨率下把布局设定好
试试bootstrap
已解决问题
未解决问题

我要回帖

更多关于 手机端页面自适应 的文章

 

随机推荐