长沙网站制作_Media使用规则

发布日期:2016-10-24 07:58

长沙网站建设中,不同设施的浏览器窗口尺寸可能是不同的。如果只针对某种窗口尺寸来制作网页,在其他设备呈现该网页时就会产生很多问题。如果针对不同的窗口尺寸制作不同的网页,则要制作的网页会太多。使用media这个模块,网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式,然后让浏览器针根据不同的窗口尺寸来选择使用不同的样式即可。

根据不同的窗口尺寸来选择使用不同样式,Media在使用时会给div不现的属性,当浏览器窗口尺寸不同时,页面会根据当前窗口的大小选择使用不同的样式。当窗口在不同的大小情况下,会根据界面所写的样式进行缩放与展开。

Media的使用规则:@media screen and (栏目的宽度){}

页面内的样式会让界面的布局根据的宽度的改变来进行样式的改变,在HTML5的带动下,media的使用越来越普遍,界面会根据当前界面制作的方法来阄窗口进行绽放,能能自动从电脑端切换到手机端界面

下面我们用的一个案例来进行说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>根据不同的窗口尺寸来选择使用不同样式</title>

<style type="text/css">

body{magin:20px 0;}

#container{width:960; margin:auto;}

#wrapper{ width:740px; float:left;}

.height{ line-height:600px; text-align:center; font-weight:bold; font-size:2em; margin:0 0 20px 0;}

#main{width:520px; float:right; background:yellow;}

#sub01{ width:200px; float:left; background:orange;}

#sub02{ width:200px; float:right; background:green;}

</style>

</head>

<body>

<div id="container">

<div id="wrapper">

    <div id="main" class="height">主栏目</div>

        <div id="sub01" class="height">次要栏目</div>

    </div>

    <div class="height" id="sub02">辅助栏目</div>

</div>

</body>

</html>

每一个新式内都有一个公用的样式,对于不同的屏幕会用不同的样式来进行修改

 

@media screen and (min-width:1000px){

#container{ width:1000px;}

#wrapper{width:780px; float:left}

#main{ width:560px; float:right;}

#sub01{ width:200px; float:left;}

#sub02{ width:200px; float:right;}

}

@media screen and (min-width:640px) and (max-width:999px){

#container{ width:640px;}

.height{ line-height:300px;}

#wrapper{width:640px; float:none;}

#main{ width:420px; float:right;}

#sub01{ width:200px; float:left;}

#sub02{ width:100%; float:none; clear:both; line-height:150px;}

}

@media screen and (max-width:640px){

#container{ width:100%;}

.height{ line-height:300px;}

body{ margin:20px;}

#wrapper{width:100%; float:none;}

#main{ width:100%; float:none;}

#sub01{ width:100%; float:none; line-height:100px;}

#sub02{ width:100%; float:none; line-height:100px;}

}

在这三个界面内可以看到这是从一个电脑界面到手机界面的切换,这只是在做时根据界面的不同要求写的media,界面会根据窗口的大小变化来选择自己的样式。

Media的出现是让样式更加简洁,样式不在过于复杂,可以一个样式多种用法。

以上信息由长沙网站建设--长沙蒲公英网络收集与整理,禁止用于任何商业行为