响应式网页实例源代码(响应式网页设计代码)
admin 发布:2022-12-19 07:46 134
今天给各位分享响应式网页实例源代码的知识,其中也会对响应式网页设计代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、如何用一简单的CSS制作响应式HTML网页
- 2、ASP网页程序设计中10个非常有用的实例代码
- 3、响应式布局 怎么用css写响应式
- 4、html5怎么制作一个响应式网页?
- 5、HTML5怎么制作响应式网页
如何用一简单的CSS制作响应式HTML网页
建议展开阅读
新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......
三个部分[Viewport][网格视图][媒体查询]
1.先在head里面设置Viewport
meta name="viewport" content="width=device-width, initial-scale=1.0"
用户可以通过平移和缩放来看网页的不同部分。
2.很多响应式都基于网格视图设计
响应式网格视图通常是 12 列,宽度为100%,在网页自动伸缩
比如CSS里面写
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
这样即可在html写
div class="row"
div class="col-3"
ul
li标题1/li
li标题2/li
li标题3/li
li标题4/li
/ul
/div
div class="col-9"
h12333333/h1
p2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333/p
p2333333333333333333333333333333333323333333333/p
/div
达到简单的响应式效果[拖拽浏览器大小查看]
图片响应式方法
div {
width: 100%;
height: 400px;
background-image: url('url');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
background-size 属性设置为 "contain", 图片比例会自动缩放。
3.媒体查询主要用于针对不同的媒体类型定义不同的样式
比如我在电脑显示图片1,但是在手机显示的是图片2
详细可以私信我
ASP网页程序设计中10个非常有用的实例代码
ASP网页程序设计中10个非常有用的实例代码
ASP可以与Web数据库以及其它程序进行交互,是一种简单、方便的编程工具。下面由我带来ASP网页程序设计中10个非常有用的实例代码。
1.如何用Asp判断你的网站的.虚拟物理路径
答:使用Mappath方法: %= Server.MapPath("\")%
2.我如何知道使用者所用的浏览器
答:使用the Request object方法:
3.如何计算每天的平均反复访问人数
答:解决方法
% startdate=DateDiff("d",Now,"01/01/1990")
if strdate 0 then startdate=startdate*-1
avgvpd=Int((usercnt)/startdate) %
显示结果
% response.write(avgvpd) %
that is it.this page have been viewed since November 10,1998
4.如何显示随机图象
% dim p,ppic,dpic
ppic=12
randomize
p=Int((ppic*rnd)+1)
dpic="graphix/randompics/"p".gif"
%
显示
img src=" %=dpic% "
5.如何回到先前的页面
答: a href=" %=request.serverVariables("Http_REFERER")% " preivous page /a
或用图片如: img src="arrowback.gif" alt=" %=request.serverVariables("HTTP_REFERER")% "
6.如何确定对方的IP地址
答: %=Request.serverVariables("REMOTE_ADDR)%
7.如何链结到一副图片上
答: % @Languages=vbscript %
% response.expires=0
strimagename="graphix/errors/erroriamge.gif"
response.redirect(strimagename)
%
8.强迫输入密码对话框
答:把这句话放载页面的开头
% response.status="401 not Authorized"
response.end
%
9.如何传递变量从一页到另一页
答:用 HIDDEN 类型来传递变量
% for each item in request.form %
input namee=" %=item% " type="HIDDEN"
value=" %=server.HTMLEncode(Request.form(item)) % "
% next %
/form
10.怎样才能使得htm文件如同asp文件一样可以执行脚本代码
答:Internet Sevices Manager - 选择default web site - 右鼠键- 菜单属性-〉主目录- 应用程序设置(Application Setting)- 点击按钮 "配置"- app mapping - 点击按钮"Add" - executable browse选择 \WINNT\SYSTEM32\INETSRV\ASP.DLL EXTENSION 输入 htm method exclusions 输入PUT.DELETE 全部确定即可。但是值得注意的是这样对htm也要由asp.dll处理,效率将降低。
;
响应式布局 怎么用css写响应式
做响应式网站离不开CSS响应式布局查询代码写法,而在此之前,我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。
什么是媒体查询?
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color(等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
如何在CSS中引入媒体查询?
媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式。
如何用CSS做响应式布局呢?
1、在HTML头部添加以下代码,用来显示兼容移动设备的显示效果。
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /
参数详解:
width=device-width :宽度等于当前设备的宽度
initial-scale=1 :初始的缩放比例(默认为1)
minimum-scale=1 :允许用户缩放到的最小比例(默认为1)
maximum-scale=1 :允许用户缩放到的最大比例(默认为1)
user-scalable=no :用户是否可以手动缩放(默认为no)
2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的,Media也不例外。
link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/
link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/
3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and (设备特性){样式代码}
/*媒体查询*/
/*当页面大于1200px时,大屏幕,主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里,中等屏幕,分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
main .center h2 {
font-size: 40px;
}
}
/*768和991像素之间的屏幕里,小屏幕,主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
main .center h2 {
font-size: 35px;
}
}
/*在480和767像素之间的屏幕里,超小屏幕,主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
main .center h2 {
font-size: 30px;
}
main .center p {
font-size: 15px;
}
main figure {
width: 49.2%;
}
}
/*在小于480像素的屏幕,微小屏幕,更低分辨率的手机*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
footer .bottom, footer .version {
font-size: 13px;
}
main .center h2 {
font-size: 26px;
}
main .center p {
font-size: 14px;
}
main figure {
width: 99%;
}
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式,响应式布局就没问题。
html5怎么制作一个响应式网页?
HTML5 制作响应式网页,首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例,讲述如何制作响应式网页。
1、选定基本设计尺寸,一般以1080为基准。确定响应式web设计的应用场景之后,和美工(或设计师)沟通,之前,一般需要美工出几套主流移动设备屏幕分辨率的设计图,现在,使用流式布局以及rem等可以使用一套设计图,以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后,前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来,Fireworks cs6切图更快,但是Fireworks有时会有图片失真的情况发生,所以,有时需要使用PS进行配合,PS有切片工具可以专门用来切图。
具体代码:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
HTML5怎么制作响应式网页
1.调整视口
代码实例:
!DOCTYPE html
head
meta charset="UTF-8" /
title布局之路-移动端开发实例/title
meta name="viewport" content="width=device-width,user-scalable = no" /
link rel="stylesheet" type="text/css" href="css/reset.css" /
/head
body
div class="wrap"/div
/body
/html
代码解析:由于使用不同设备打开网页时,宽度均有所不同,所以不能讲视口设置为固定值,应当为width=device-width,即将视口设置为当前设备的宽度。
2.确定设计图的最小字体
浏览器(部分)能够显示的最小字体未12px,当移动端页面宽度为320px时,要保证最小字体为12px,那么在1080px的设计图中,最小字体应当为42px。
代码实例:
style type="text/css"
html {
font-size: 42px;
}
/style
3.浮动布局
各个区块都是浮动的,不是固定不变的。为了能自适应各个窗口。
代码实例:
.main {
float: left;
width: 70%;
}
.box {
float: left;
width: 60.93%;
font-size: 1.71rem;
text-align: center;
line-height: 4.64rem;
}
float浮动的好处就是,如果宽度不够放置下这个元素,元素会自动滚动到下方。
4.通过媒介查询,为不同设备加载相应样式
有条件应用样式:
style
@media all and(min-width:500px){ ... }
@media (orientation){ ... }
/style
代码解析:
第一行媒体查询代码指的是:为宽度大于等于500px的设备设置样式。
第二行媒体查询代码指的是:为纵屏状态(可见区域大于或等于宽度)下的移动端设备设置样式。
有条件的加载样式表:
head
link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" /
link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" /
/head
代码解析:
第一行媒体查询代码指的是:为宽度大于等于1024px的设备,加载wide.css文件。
第二行媒体查询代码指的是:为宽度小于等于320px的设备,加载mobile.css文件。
5.使用百分比和rem替换px
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
代码效果对比:
/*使用固定像素*/
.box {
float: left;
width: 658px;
font-size: 72px;
text-align: center;
line-height: 195px;
}
/*使用百分比和rem*/
.box {
float: left;
width: 60.93%;
font-size: 1.71rem;
text-align: center;
line-height: 4.64rem;
}
代码解析:
水平方向的值,将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。
例如,父级宽度为1080px, 子级元素为197px,那么子元素转换为百分比为:197/1080*100%=18.24%。需要注意的是百分比根据父级计算,当标签结构级别不同时,计算公式中的“分母”也有所不同,在开发时这个地方很容易出现问题,请务必注意。
垂直方向的值,将具体像素调整为rem,与水平方向相比,垂直方向的计算就比较简单。例如,行高为195px,HTML标签当前的字体大小为42px,将行高转换为rem单位,即195/42= 4. 64rem。
响应式网页实例源代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于响应式网页设计代码、响应式网页实例源代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-15北京网站建设制作公司,北京网站制作网页
- 05-15如何制作一个网页网站,如何制作一个网页?
- 05-13网页设计排版布局技巧,网页设计排版布局技巧
- 05-13怎么制作公司网页,怎样制作自己公司的网页
- 05-12网页设计需要学什么,网页设计学什么语言
- 05-12dw网页设计模板网站,dw网页设计模板网站免费
- 05-11怎么在百度制作自己的网站,如何能在百度上设计个自己的网页
- 05-11设计一个简单的网页,独立站建站平台有哪些
- 05-10自己建网页,自己建网页详细流程
- 05-09网页代码,网页代码快捷键
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接