008-网页应用开发WebApplicationDevelopment（三）

 

 

 

Responsive Web Design响应式网页设计

    一个建筑的基础决定了它的足迹,决定了它的框架和外观.建筑的阶段更加不可变.创造性的想法能决定物理形态.
    创造网页是一件完全不同的事情.我们的工作是被短暂决定的,而且可能一年两年就被更换了.
    现在移动端比电脑更加活跃,而且现在有越来越多不同的设备.我们需要为每个设备设计一个网页吗,不可能的.那么我们的网页如何适配所有的设备呢?
    
    如果viewport,小于800*600,那么图片可能被剪切了,导航栏可能看不见了.总之,一般在电脑上依然显示正常,但是放其他设备上就可能出问题了.
    
从CSS2.1开始,出现了不同的media types,
比如这样
  media="screen" />
  media="print" />

然后W3C创建了media queries作为CSS3的一部分.media query让我们可以针对部分设备,也可以检测部分设备的特性.
举个例子
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

这个query有2个组件
1.media type (screen)
2.max-device-width

然后还可以
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

还可以用@media
@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

 

 

 

 

 

接下来开始正式学习响应式网页

Responsive Web

 

我们来写一个简单的网页

    
    
    



    
Heading 1
    
Here is a paragraph of text.
    
Heading 2
    
Here is a paragraph of text.

然后来看看网页

 

 

 

然后我们写一下css,试着修改一下字体

body {
    font-size: 30px;
}

再看下网页

 

我们发现,整个网页的字体都变大了

 

然后我们再改一下

把px改成em

body{
    font-size: 1em;
}

再试一下2em

body {
    font-size: 2em;
}

 

 

然后再试一下

h1 {
    font-size: 1em;
}

h2 {
    font-size: 1em;
}

p {
    font-size: 2em;
}

这样的话,

p的字体比h1和h2还要大了

 

 

 

 

 

 

单位vh

我们来看看vh这个单位

.div01 {
    background-color: aquamarine;
    height: 100vh;
}

.div02 {
    background-color: navajowhite;
    height: 100vh;
}

 

我们给了100vh,意思就是100%的viewport height

那么就是视窗的100%

我们看下效果

 

这边截图并不能很好的展示

但总之就是100%的窗口

 

 

 

改成50的话就是一半

.div01 {
    background-color: aquamarine;
    width: 50vw;
    height: 50vh;
}

.div02 {
    background-color: navajowhite;
    width: 50vw;
    height: 50vh;
}

 

 

 

 

 

 

viewport

meta name = viewport

什么是viewport
我们最好是在head标签里面加上一个meta标签

这是为了告诉浏览器把内容调整到和显示尺寸合适

 

 

 

 

 

用%百分号取代px

.div {
    width: 100vw;
    height: 100vh;
}

.div01 {
    background-color: aquamarine;
    width: 20%;
    height: 20%;
}

.div02 {
    background-color: navajowhite;
    width: 20%;
    height: 20%;
}

 

 

 

 

Media Queries

media queries可以针对不同的设备然后选择不同的css
比如这样
@media(min-width: 600px){
    body{
        width: 60%;
        margin: auto;
    }
}