初学HTML5的一点理解

刚接触了一点点用h5移动端的一点知识，用自己最浅薄的理解来看解决自适应屏幕尺寸问题和适应屏幕尺寸的布局问题。
这里，为了解决自适应屏幕尺寸问题大概需要做的就是把HTML中的元素的尺寸尽可能的用百分比表示，再就是结合上vieport虚拟窗口了，一般是用到的这句话：
<meta name="viewport" content="width=device-width,initial-scale=1"/>，查了一下，大概是这个意思：
width:可视区域的宽度，值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
说真的，里面的意思并不了解，以后慢慢参悟吧。。

再就是通过media queries解决屏幕尺寸的布局问题了，其实质就是根据不同的屏幕尺寸设置不同的css样式。
首先我们要在head里面引入css文件
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px),only screen and(max-device-width:480px)" href="device.css"/>，就是类似这种形式了，
然后就是在css文件里设置相应的样式了：
还有另外的一种方式，就是要把相应的样式放到<style type="text/css"></style>下，如下：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc;
}
}
<style type="text/css">

@media screen and (min-width: 600px) { 当屏幕尺寸大于600px时，应用下面的CSS样式
*{
font-size:90%;
}
.page2_ul li:nth-child(1){
margin-top: 10px;
}
.page2_ul li:nth-child(3){
margin-top: 80px;
}
.page4_ul{
width: 50%;
}
.left_2 p:nth-child(2){
text-indent: 6em;
}
.left_2 p:nth-child(3){
text-indent:7em;
}
.left_2 p:nth-child(4){
text-indent:7em;
}
#p2_set1{
text-indent:8em;
}
#p2_set2{
text-indent:10em;
}
#p2_set3{
text-indent:6em;
}
.page5_footer{
width: 30%;
}
.page5_ul li{

margin-top:20px;
}
}
@media screen and (min-width:350px) and (max-width: 410px){
*{
font-size: 70%;
}
.page2_ul li:nth-child(3){
margin-top: 80px;
}

@media screen and (min-width:410px) and (max-width:600px){
*{
font-size: 75%;
}
.page2_ul li:nth-child(3){
margin-top: 100px;
}
}
</style>

巴特西

初学HTML5的一点理解

最新文章

热门文章