首页 >> 新闻动态 >>建站资讯 >> 如何制作自适应的网站,企业建站响应式网站制作
详细内容

如何制作自适应的网站,企业建站响应式网站制作

如何制作自适应的网络收听语音
随着网络的迅速发展,越来越多的人使用手机上网。移动设备不仅仅是桌面设备,也是最常见的接入因特网的终端。因此,Web设计者必须面对一个问题:如何在不同大小的设备上显示相同的Web页面?手机屏幕很小,宽度一般在600像素以下,PC屏幕的宽度一般在1000像素以上,有些像素达到2000像素。同样的内容,在屏幕大小不同的屏幕上显示出满意的效果并不是一件容易的事。许多网站被设计来为不同的终端设计多个网页,但存在许多维护问题。这里我们可以设计一个简单的盒子,可以识别不同的终端,显示不同的效果。

工具/原料
DM web design software
ps图像处理软件
方法/步骤

在Web代码的头部,添加一行视口元素标记。
元名称=“视口”内容=“宽度=设备宽度,初始规模= 1”
视口是Web页面的默认宽度和高度。上面的行代码意味着页面宽度等于屏幕宽度(宽度=设备宽度),原始缩放比例(初始比例= 1)为1,也就是说,初始页面大小占屏幕区域的100%。

由于网页会根据屏幕的宽度调整布局,绝对宽度的布局不能使用,绝对宽度的元素不能使用。图像也是如此。
具体地说,CSS代码没有指定像素宽度:
宽度:XXX;
只能指定百分比宽度:
宽度:XX;
也许
宽度:自动;

字体不能使用PX,但只有相对大小(EM)。
例如:
体{字体:正常100%黑体,Arial,sans-serif;}
上面的代码指定字体大小是页面默认大小的100%,即16像素。

流体布局(流体网格)
“流布局”的意思是每个块的位置是浮动的,而不是固定的。
主{浮点:右边;宽度:70%;}
。leftbar {浮动:左;宽度:25%;}
浮点的优点是,如果宽度太小,不能放置这两个元素。以下元素将自动滚动到前元素的底部,而不是水平溢出(溢出),避免出现水平滚动条。

“自适应网页设计”是mediaquery模块介绍了CSS3的核心。
它的意思是自动检测屏幕的宽度,然后加载相应的CSS文件。
<链接rel=“样式表”type=“文本/ CSS媒体=“屏幕(最大设备的宽度:400px)和“href =“tinyscreen .css”/>
上面的代码意味着,如果屏幕宽度小于400像素(最大设备的宽度:400px),该tinyscreen.css文件加载。
<链接rel=“样式表”type=“文本/ CSS媒体=“屏幕(最小宽度:400px)和(最大设备的宽度:600px)“href =“名.css”/>
如果屏幕的宽度是400像素和600像素之间的smallscreen.css文件加载。
结束
请参考下面的示例—我称之为“box”
<!DOCTYPE html >
<
<head>
<元字符集=“UTF-8”>
视口要重置<!——iPhone的初始规模-->
元名称=“视口”内容=“宽度=设备宽度,初始规模= 1”>
演示:3步响应式设计
IE8或< css3-mediaqueries.js!——老—
<!——如果……9 ]
<脚本src=“http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”> < /脚本>
<![判断] -->
<样式>“文本/ CSS”>
{体
字体:1em / 150% Arial,Helvetica,sans-serif;
}
{a
颜色:# 669;
文字装饰:无;
}
答:悬停{
文字装饰:下划线;
}
{ H1
字体:黑体36px / 100% Arial,Helvetica,sans-serif;
}
/ ************************************************************************************
结构
************************************************************************************* /
# pagewrap {
填料:5px;
宽度:960px;
保证金:20px汽车;
}
#头{
身高:180px;
}
#内容{
宽度:600px;
浮点数:左;
}
#边栏{
宽度:300px;
浮子:右边;
}
#页脚{
清楚:两者;
}
/ ************************************************************************************
媒体查询
************************************************************************************* /
对于980px或少/ * * /
“媒体屏幕(最大宽度:980px){
# pagewrap {
宽度:94%;
}
#内容{
宽度:65%;
}
#边栏{
宽度:30%;
}
}
对于700px或少/ * * /
“媒体屏幕(最大宽度:700px){
#内容{
宽度:自动;
浮点数:无;
}
#边栏{
宽度:自动;
浮点数:无;
}
}
对于480px或少/ * * /
“媒体屏幕(最大宽度:480px){
#头{
高度:自动;
}
{ H1
字体大小:24px;
}
#边栏{
显示:无;
}
}
/ *边界和指导方针(您可以忽略这些)。
#内容{
背景:# f8f8f8;
}
#边栏{
背景:# f0efef;
}
#头,#内容,#边栏{
边距:5px;
}
# pagewrap,#头,#康特