A. 做响应式web 页面怎么设计
响应式Web设计的方法
介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。
首先我们一起来看看Media Queries,这里我只会对其做一个简单的列举介绍。
通过媒体查询的设置,我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种:
1、通过link标签:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
示例代码代表当当前屏幕宽度小于479px的时候,加载testcssbywidth1.css文件来渲染页面。
2、CSS中直接设置:
@media screen and (max-width:479px) {
/* 具体的CSS属性设置 */
}
对于Media Queries的一些常用属性,只对常用的几个做一个简单列举说明,其他的属性请各位自行查阅相关资料:
width:描述终端设备显示区域的宽度,接受max/min的前缀;
height:描述终端设备显示区域的高度,接受max/min的前缀;
device-width:描述终端设备屏幕的宽度,接受max/min的前缀;
device-height:描述终端设备屏幕的高度,接受max/min的前缀;
orientation:描述终端设备处于横屏还是竖屏的状态,取值分别为:landscape/portrait。
当我们调整浏览器大小的时候,上面通过媒体查询属性的操作就可以完成响应式Web设计的工作,但是这却不能满足移动终端的浏览器,因为移动浏览器默认页面是为宽屏幕设计的,所以会把他缩小来适应小屏幕,但是终端设备却无法识别正确的宽度,所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的
B. h5是什么响应式是什么
H5 就是 htm5,但是很多人说的 h5 指的是手机端浏览器 app
响应式就是让一套代码适用不同的终端,
手机屏幕大小不一样,要让页面在不同手机显示优雅,
入门学习前端:零基础入门前端学习HTML5?JavaScript?CSS?
C. 什么是响应式web设计
响应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏。当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。
响应式Web设计的优点:可以兼容所有尺寸的屏幕,随着手持设备(手机)屏幕尺寸繁多,也有很好的兼容性;而且开发一次,pc版和触屏版,手机版融合为一;
响应式Web设计的缺点:对前端工程师要求比较高,它的屏幕兼容要求前端工程师对各种浏览器差异性了解比较多,对于大数据展示的门户站点,如果用同一页面,即时浏览器不崩溃,在手机上一个页面,很难滑到最底部,带来操作是十分不方便的,触屏版和手机版对优质信息展示不足。
综合优缺点:响应式Web设计在企业站点,微型或者小站还是可以用的,对于大中型站点不合适(尤其大信息量展示的)。
D. 国内优秀的响应式WEB网站有哪些
互联网时代,网页这种东西是不可或缺的,也是视觉设计师还有程序员们一直在努力的方向,一个适用性良好,美观的网站,总能得到更多的关注。网页从静态的到动态,再从动态到如今的响应式Web网站,这都是网页设计的进步。
总而言之,现在的响应式Web可以说是大势所趋,是现在的潮流也是未来网页发展的趋势,毕竟这种良好的交互性,是非常棒的。
E. 如何将web页面改成响应式
第一步:检测网页响应式
浏览器打开调试模式,打开响应式设计模式,在预览区域拖动大小范围,如果页面元素随大小变化而自适应,则页面是响应式页面,反之,页面是固定非响应式页面。如图:
第二步:编辑网页源文件
用Dreamweaver打开页面源文件,查看代码样式及文件结构,(Web页面的视觉效果由CSS样式表文件控制)。如图:
第三步:植入响应式代码
在CSS样式表中插入以下代码:
@media screen and (min-width:200px) and (max-device-width:640px){
/*这里写元素的样式*/
}
代码解释:这句代码是指定了在200像素~640像素之间的终端,显示的效果,在其他终端不显示。
第四步:横屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示(全屏拉伸缩放无滚动条),垂直方向用滚动条展示。如图:
第五步:竖屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示(全屏拉伸缩放无滚动条),垂直方向用滚动条展示。如图:
第六步:全屏响应式设计
在CSS中插入以下代码
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在终端的横向展示(全屏拉伸缩放无滚动条),垂直方向用滚动条展示。如图:
7
第七步:加工检测
响应式设计完成之后,用不同的终端全部检测一遍,有不合格的地方继续修改,这是程序员必须知道的也不能忽视的。
F. 什么是web响应式网站
响应式Web设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
G. 响应式Web设计的概念,应该怎样做响应式Web设计
前言 现在使用移动设备人越来越多,移动版的Website随之也越来越重要;但是移动端设备的大小不一,屏幕分辨率各不相同,我们不可能为 BlackBerry,iPhone, iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率,这种设计就叫响应式 Web设计 什么是响应式Web设计(Responsive Web design)? 响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。它包括了灵活的网格和布局,图像和智能使用CSS的media queries特性。当用户从Laptop切换到iPad上时,该网站应能自动地切换CSS规则以适应Device分辨率,图像尺寸和脚本执行。换句话说,响应式Web设计是具备能够自动响应用户喜好的技术。这将一劳永逸的满足对每个新上市的移动终端都要进行不同设计和开发的需求。 需要注意的是:响应式Web设计不仅仅是 下图列出了一些最常见的: 所以,如果你要使你的客户满意,你必须让你的网站能够自动调整并适合上述设备的屏幕。例如,你应该为不同的设备定制不同的布局结构: 定制布局 同样,有些时候,根据需要显示或隐藏一些内容: 显示或隐藏内容 很明显,我们不能为每一种设备定制一个页面。所以,我们应该如何处理这种情况呢?
H. 移动式web和响应式web的区别
其实移动web和传统的web并没有本质的区别。但是,同一个页面不可能被桌面浏览器和移动浏览器同时浏览,asp.net可以为移动web提供一个系统自适应结构,这个结构可以为浏览器提供特定的输出,而且可以将呈现逻辑细分为较小的部分,这样在显示区域和输入设备硬件都有限的情况下更好的工作。
移动web开发这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性。web app开发特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).
I. 将web网页项目改成响应式应该怎么做
需要后台吗?前端手机端直接使用bootstrap 写响应式界面就行了,不需要网上的SSH的