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

最新推荐文章于 2024-08-14 19:32:44 发布

daisy_Hawen

最新推荐文章于 2024-08-14 19:32:44 发布

阅读量1.3w

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/sinat_25127047/article/details/50609224

版权

本文探讨了如何使用CSS实现屏幕自适应，受到谷歌页面的启发，分析了谷歌页面的布局和自适应策略，包括form、div、input的嵌套，iframe的应用，以及text-align:center实现的居中效果。通过css @media规则进行不同屏幕尺寸的样式调整，以实现简单的自适应设计。

摘要由CSDN通过智能技术生成

昨天写了一篇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">