web项目研发中怎样使html页面随手机/pad浏览器自动调整页面

如题所述

你可以把网页写成响应式啊。响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

响应式设计在2012年被提的比较多,但是响应式设计仍然在不断变化,不断创新。比如,新的设备不断出来(iPad Mini),这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意,“让人们忘记设备尺寸”的理念将更快地驱动响应式设计,所以Web设计也将迎来更多的响应式设计元素。

UIKit
UIkit 是一个轻量级、模块化的前端框架,可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备,会自动做出响应,提供一致的体验。

Bootstrap
由两个Twitter员工开发并开源的前端框架,目前已经更新到了v3.0版本,在Github上非常火爆,在国内也有很多粉丝,值得一试。

Adobe Edge Inspect
对移动开发者尤其有用的工具,其前身是 Adobe Shadow,用于帮助设计师和开发者同时在多个移动设备上预览应用设计,发现和解决跨平台问题。
Responsive Web Design Sketch Sheets
如果你还在用纸和笔来创建你的实体模型,你可以用这些现有的草图来设计你的交互网站了。

Foundation
号称是世界上最先进的响应式前端框架。

SimpleGrid
轻量级的响应式 CSS 网格系统,让你可以快速创建适应于手机和平板电脑的网站。

Responsive Testing
这个工具可以让你预览你设计网页在不同设备上的效果,只需要访问它的网站并输入你网站的地址就可以看到了。
温馨提示:内容为网友见解,仅供参考
第1个回答  2015-09-13
你可以自行百度响应式页面,iPad端的响应式,只需要把所有有关width的参数都用百分比来设定,具体的还是要看度娘,以及慕课网上有免费教程,但是手机端就麻烦许多,需要重新设计一个UI界面,以适应手机端显示屏大小,然后重新重构,具体请百度响应式,几乎都会出来
第2个回答  2015-10-04
响应式开发,,现在有很多现成的css框架 如:Bootstrap

http://v3.bootcss.com/
第3个回答  2012-10-10
写两套如果是 手机或者 是pad 跳转不同的 页面就行了本回答被提问者采纳
第4个回答  2012-10-10
期,要认真写哦

web页面设计是如何适配pad的
pad有固定的尺寸,很多浏览器开发者模式中都可以查到不同型号手机包括pad的px。然后在css样式中对该样式进行判断,调试到自己想要的样式就可以。就是给这个px内的样式做修改。

移动端Web页面适配方案(整理版)
早期网页设计采用 静态布局 ,通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备,即 <meta name = 'applicable-device' content = 'mobile'> ,在 <meta> 标签中的 viewport 标签中设置 width ,通过 js 动态修改标签的 initial-scale 使得页面等比缩放,刚好占满整个屏幕。一些文章...

怎么让网站自动识别设备,自动跳转wap页面
(4)、进入域名解析系统,做一个别名cname解析,比如:你手机网站制作公司给的地址123.域名.com解析到m.baidu.com域名解析系统。2、根据移动终端和浏览器版本信息判定的语法 还有一些站长或SEO可能会考虑到移动终端的版本和浏览器版本信息,对此,肥猫科技也为大家整理了一段比较有效的代码,如下所示:<s...

在网页制作中如何控制DIV居中显示,用CSS怎么控制背景图片大小?
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的<style>标签中,输入css代码:body {text-align: center;background: url(small2.png); background-size: 60%;} 3、浏览器运行index.html页面,此时成功通过css控制了div居中显示,背景图片的大小为60%。

怎样把一个ssh架构的网站用html5适配到移动端(手机、pad)
css部分,只需要兼容webkit内核的就可以了 也就是用谷歌浏览器做测试。要考虑windows phone的话 就在加写一种兼容写法咯。html标签这部分其实就按pc端的正常标签写就可以了 图片,ui 这个很重要了,因为现在的手机分辨率高,拿retina屏幕的iphone来说 你看到的图片其实都是被放大一倍的。所以你要想手机...

PHP实现网页自动更新块
将english dat和english php存盘 上传至服务器的同一个目录下 最后一道工序就是让你的网页调用这个php程序来显示内容了 因为php运行的结果是以javascript形式输出的 我们只要把这段php当成一段javascrupt来调用即可 方法是 用记事本或网页编辑软件打开你要修改的文件 在你想让动态内容显示的位置加入以下...

...当把浏览器缩小后,会自动变成手机页面显示,请问高人,这是怎么实现...
选择兼容版的前端框架就可以实现的,市面上最流行的现在就是bootstrap3.0+ 及以上的版本,优先兼容手机版,pad,PC网页都兼容的,楼主可以在bootstrap中国区官网了解一下。

三星GALAXY tab 平板电脑,怎么使网页全屏?我用手在对角线上拉,但是页...
网页全屏都可以实现的,建议用opera mini浏览器或者 skyfire浏览器,这两个比系统原带的好用。qq有专用的android tab版,正适合p1000。文件拷贝可以通过usb连线,把手机连线设为大容量存储模式。

如何制作HTML文件?
一、打开简单的文本编辑器。大部分文本编辑软件都能编写HTML,不过,复杂的软件有自动格式功能,比较难组织HTML页面。二、将文件格式改成“网页”(Web Page)、“.html”或“.htm”,存在容易找到的位置。上面三个选择是一样的,没有差别。三、用网页浏览器打开文件,双击文件,它应该会自动在浏览器...

网页制作的常用的代码技术
A:在 FrontPage2000 中,点击[插入]->[高级]->[插件],在弹出的窗口中,设置一下 Flash 文件的大小及其它信息,确定即可。 5,Q:怎样在网页中加入注释? A:在共同网页开发中,加入注释是防止分工被搞混淆或者注释某段代码特殊的含义,加入注释的格式是: 〈!-〔注释内容…〕--〉 6,Q:怎样测试浏览器并自动装入...

相似回答