css实现屏幕自适应（仿谷歌静态页面）

来源：互联网发布：看门狗画面设置优化编辑：程序博客网时间：2024/06/03 08:32

昨天写了一篇nodejs之客户端的实现，以及http模块的讲解。然后不知道为什么没有保存下来，我好沮丧。
于是现在不想写node了，接下来这段时间，可能说得更多的是css和html相关的东西。因为要做项目了，好开心。而任务主要是做界面，好久没有碰css和html，怕生疏了。
前言
今天看谷歌的时候发现它居然做的是自适应，然而百度居然没有做
贴个百度的界面
这里写图片描述
吐槽一下：
1、没有自适应
2、右上角为了显示出百度家的产品，特意用黑体+加粗+下划线，还有更多产品那个蓝底白字，我一开始还以为是我的网络出了问题，css没有加载出来，真的是太丑了。如果上面的字体换一下，或者用一种小图标来表示也行。
不知道是多久没有用过百度了，真的是突然一看很不习惯。
然后，以前也没有对自适应那么在乎，既然谷歌都用自适应了，那么来讲讲自适应吧。
来自阮一峰的博文，我最崇拜的博主之一了
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
主要讲了几种方法：
一、允许网页宽度自动调整
二、不使用绝对宽度
三、相对大小的字体
四、流动布局（fluid grid）
五、选择加载CSS
六、CSS的@media规则
七、图片的自适应（fluid image）
其实这些实现都很简单，这里主要说一下常用的：
通过css @media实现
css @media就是规定在屏幕宽度低于或者高于一个值的时候，某个块的大小，下面是我写的一段代码，定义了在

//屏幕宽度低于600px，设置块大小@media screen and (max-width:600px) {    .middle,.left,.right{        width:100%;    }    .st-container a,input{        width:80px;        height:25px;    }}//屏幕宽度在600px与1000px之间的，调整大小@media screen and (min-width:600px) and (max-width:1000px) {    .left,.middle{        width:48%;    }    .right{        width:100%;    }    .st-container a{        width:8%;        height:25px;    }}//这是以前写的代码了，不太合乎规范，但是大概能理解自适应是怎么回事

仿谷歌页面

本来觉得谷歌的网页简单没什么大不了的，但是仔细研究才发现它的价值。
首先，它的搜索框是form+div+input嵌套的
其次，下面的最常访问页面展示是iframe来做的
然后，就是它的居中，它的居中是采用text-align：center来实现的，与我以往采用的margin：0 auto有所不同。
最后：就是自适应，其实自适应很简单，就是对搜索框和最多访问框的调整。
Index.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="style.css">    <title></title></head><body><div class id="mngb"><div id="gb" class="gb_T">    <div id="gb_2">        <div>Hawen</div>        <div class="icon"><a href="#">Gmail</a></div>        <div class="icon"><a href="#">图片</a></div>        <div class="icon"><a href="#"><img src="./img/message.png"></a></div>        <div class="icon"><a href="#"><img src="./img/home16.png"></a></div>        <div class="icon"><a href="#"><img src="./img/man.png"></a></div>    </div></div></div><div class id="lga">    <img src="img/1.png">    <div id="logo-sub">简体中文</div></div><form action="#" id="f" method="get">    <div class="fkbx">        <div id="fkbx-text">在google上搜素或输入网址</div>        <input id="q">    </div></form><div class="mv-hide">    <div id="mv-tittle">        <iframe id="mv-single" src="single.html"></iframe>    </div></div><div id="prm-pt"></div></body><script>    window.onload=function(){        var input=document.getElementsByClassName("fkbx")        var form=document.getElementById("f")        input.onclick=function(){            input.style.visibility="hidden";        }    }</script></html>

style.css

body{    padding:0;    margin:0;    font:small arial,sans-serif;    font-size:16px;    text-align:center;}#mngb{    position: absolute;    width: 100%;    top:15px;}#gb_2{    width: 285px;    position: relative;    padding-left:30px ;    padding-right: 15px;    float: right;    display: flex;}.icon{    padding-right: 10px;    padding-left: 10px;}a{    text-decoration:none;}#lga{    margin-top:80px;    height: 231px;    text-align: center;}#lga img{    margin-top: 80px;   width: 272px;   height: 93px;}#lga #logo-sub{    color: #4285f4;    left:79px;    position: relative;    /*top:-20px;*/    /*width: 0;*/}form{    height: 30px;}.fkbx{    width:670px;/*注意这里会用自适应*/    display: inline-block;    background-color: #fff;    border: 1px solid rgb(185,185,185);/*它的输入框居然是一个div，并不是一个实际的输入框*/    border-radius: 1px;    font: 18px arial,sans-serif;    height: 36px;    line-height: 36px;    position: relative;}.fkbx input{    background: transparent;    border:none;    bottom: 0;    box-sizing: border-box;    left: 0;    margin: 0;    position: absolute;    top:2px;    width: 100%;}.mv-hide{    margin-top:63px;}#mv-tittle{    text-align: start;    overflow: hidden;    position: relative;    margin: 0 auto;    height: 292px;    /*line-height: 292px;*/    width:688px;   /*自适应会调整*/}#mv-single{    border:none;    height: 100%;    width: 100%;}@media screen and (max-width: 872px) {    .fkbx{        width: 498px;    }    #mv-tittle{        width: 516px;    }}@media only screen and (max-width: 700px){    .fkbx{        width: 326px;    }    #mv-tittle{        width: 344px;    }}

single.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link type="text/css" rel="stylesheet" href="sing-style.css">    <title></title></head><body><div id="most-visited">    <div id="mv-tiles">        <a class="mv-tile" data-tid="1" href="http://blog.csdn.net/sinat_25127047">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">Daisy花园-博客频道</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/5.png">            </div>        </a>        <a class="mv-tile" data-tid="2" href="http://www.baidu.com">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">百度一下，你就知道</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/6.png">            </div>        </a>        <a class="mv-tile" data-tid="3" href="http://www.baidu.com">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">淘宝网-淘！我喜欢</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/7.png">            </div>        </a>        <a class="mv-tile" data-tid="4" href="http://www.taobao.com">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">豆瓣</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/8.png">            </div>        </a>        <a class="mv-tile" data-tid="5" href="http://blog.csdn.net/sinat_25127047">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">慕课网</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/9.png">            </div>        </a>        <a class="mv-tile" data-tid="6" href="http://blog.csdn.net/sinat_25127047">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">京东</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/10.png">            </div>        </a>        <a class="mv-tile" data-tid="7" href="http://blog.csdn.net/sinat_25127047">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">网易邮箱</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/11.png">            </div>        </a>        <a class="mv-tile" data-tid="8" href="http://blog.csdn.net/sinat_25127047">            <div class="mv-favicon">                <img src="">            </div>            <div class="mv-title">Google</div>            <div class="mv-thumb">                <img title="Daisy花园-博客频道" class="thumbnail" src="./img/12.png">            </div>        </a>    </div></div></body></html>

singe-style.css

body{    background: none transparent;    margin: 0;    overflow:hidden;    padding:0;}#most-visited{    margin: 0;    text-align: center;}#mv-tiles{    height: 276px;    line-height: 146px;    font-size: 0;    margin: 0;    position: absolute;    transition: opacity 1s;}#mv-tiles .mv-tile{    border:1px solid rgba(150,150,150,0.3);    background: rgb(242,242,242);    border-radius: 2px;    height: 128px    line-height: 100%;    margin: 0 8px;    width: 154px;}.mv-tile{    box-sizing: border-box;    display: inline-block;    font-family: arial, sans-serif;    font-size: 12px;    opacity: 1;    outline:0 ;/*outline画在 <' border '> 外面。outlines相关属性不占据布局空间，不会影响元素的尺寸；*/    overflow: hidden;    position: relative;    vertical-align: top;    white-space: nowrap;}#mv-tiles a{    color:inherit;    text-decoration: none;}.mv-favicon{    background-size: 16px;    height: 16px;    left: 7px;    margin: 0;    pointer-events: none;    position: absolute;    top:7px;    width: 16px;}.mv-title{    -webkit-mask-image: linear-gradient(to right, #000, #000, 100px, transparent);    height: 15px;    left: 31px;    line-height: 14px;    padding: 0;    top:8px;    width: 120px;    border: none;    overflow: hidden;    position: absolute;    text-overflow: clip;}.mv-thumb{    border-radius: 2px;    height:128px;    left:3px;    top:31px;    width:148px;    border: none;    cursor:pointer;    display: block;    overflow: hidden;    position: relative;}

0 0