首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

CSS网页响应式布局 自动适配Pc/Pad/Mobile设备

更新日期: 2020-02-16阅读: 2k标签: 响应式

前言

现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。

index

<!DOCTYPE html>
<html>
<head>
    <title>响应式布局</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <div id="header">头部</div>
        <div id="left">左侧</div>
        <div id="center">中间</div>
        <div id="right">右侧</div>
        <div id="footer">底部</div>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}

/*适应PC端 宽度大于1000px*/
@media screen and (min-width: 1000px) {
    #content{
        width: 960px;
        margin:0 auto;
    }

    #header{
        width: 100%;
        line-height: 100px;
        float: left;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
    }

    #left{
        width: 200px;
        line-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        margin-right: 10px;
    }

    #center{
        width: 540px;
        line-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
    }

    #right{
        width: 200px;
        line-height: 400px;
        text-align: center;
        background: #333;
        float: right;
        font-size: 30px;
        color: #fff;
    }

    #footer{
        width: 960px;
        height: 200px;
        background: #333;
        color: #fff;
        line-height: 200px;
        font-size: 30px;
        text-align: center;
        float: left;
        margin-top: 10px;
    }
}


/*适应pad端 宽度在640-1000之间*/
@media screen and (min-width: 640px) and (max-width: 1000px) {
    #content{
        width: 600px;
        margin:0 auto;
    }

    #header{
        width: 100%;
        line-height: 100px;
        float: left;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
    }

    #left{
        width: 200px;
        line-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        margin-right: 10px;
    }

    #center{
        width: 390px;
        line-height: 400px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
    }

    #right{
        width: 600px;
        line-height: 300px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        margin-top: 10px;
    }

    #footer{
        width: 600px;
        height: 200px;
        background: #333;
        color: #fff;
        line-height: 200px;
        font-size: 30px;
        text-align: center;
        float: left;
        margin-top: 10px;
    }
}


/*适应移动端 宽度小于640*/
@media screen and (max-width: 639px){
    #content{
        width: 400px;
        margin:0 auto;
    }

    #header{
        width: 100%;
        line-height: 100px;
        float: left;
        background: #333;
        color: #fff;
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
    }

    #left{
        width: 100%;
        line-height: 150px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        margin-bottom: 10px;
    }

    #center{
        width: 100%;
        line-height: 300px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
    }

    #right{
        width: 100%;
        line-height: 150px;
        text-align: center;
        background: #333;
        float: left;
        font-size: 30px;
        color: #fff;
        margin-top: 10px;
    }

    #footer{
        width: 100%;
        height: 200px;
        background: #333;
        color: #fff;
        line-height: 200px;
        font-size: 30px;
        text-align: center;
        float: left;
        margin-top: 10px;
    }
}

通过@media screen and (限制范围) 来控制网页的布局，例如
min-width代表最小的限制，max-width代表最大的限制。

PC端


Pad端


Mobile端



作者

Author:TANKING
Web:http://www.likeyunba.com

链接: https://fly63.com/article/detial/7450

上一页:  一文读尽前端路由、后端路由、单页面应用、多页面应用下一页:  Js中各种源码实现（前端面试笔试必备）

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。

使用现代CSS的响应式版面

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

web响应式图片的5种实现

在目前的前端开发中，我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片，也就是响应式图片的解决方案：js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴，高端，大气

HTML5+CSS3响应式垂直时间轴，使用了HTML5标签<section>，时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中，多个DIV形成一个序列，并把这些DIV放在<section>中。

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性，目前绝大多数浏览器已经支持了，它可以帮助我们用更少的代码写出同样多的样式，大大提高了工作效率，本篇文章将教你如何使用 CSS 变量（css variable）。CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)，其中*表示变量名称

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸

响应式布局的实现

响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

深入响应式原理

说到响应式原理其实就是双向绑定的实现，说到 双向绑定 其实有两个操作，数据变化修改dom，input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom；2. 通过表单修改value -> 修改数据

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!