响应布局就是不同宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而使页面适应不同宽度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>响应式布局</title>

    <style type="text/css">

        body,ul{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style:none;

        }

        .con{

            border:1px solid #000;

            overflow:hidden;

        }

        .con li{

            width:23%;

            height:200px;

            background-color: hotpink;

            float:left;

            margin:30px 1%;

        }

        /*当宽度小于700时下面的样式覆盖上面的样式*/

        @media (max-width:700px){

            .con li{

                width:46%;

                margin:30px 2%;

            }

        }

        /*当宽度小于500时下面的样式覆盖上面的样式*/

        @media (max-width:500px){

            .con li{

                width:90%;

                margin:30px 5%;

            }

        }

    </style>

</head>

<body>

<ul class="con">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

</html>

CSS3——PC以及移动端页面适配方法（响应布局）的更多相关文章

  1. CSS3——PC以及移动端页面适配方法（流体布局）

    流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...

  2. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  3. 移动端H5适配方法（盒子+图片+文字）

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  4. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

  5. pc和移动端页面字体设置

    移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC” ...

  6. webapp设置适应pc和手机的页面宽高以及布局层叠图片文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <title>我趣旅行网-美剧迷</ti ...

  7. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  8. h5页面适配小结

    大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...

  9. H5 前端页面适配响应式

    辞职有半个月了,面试了几家公司,还在挣扎中.... 不废话,H5页面适配成响应式,可以用百分比或者rem. rem是相对于html根元素的单位,可以根据根元素的大小做出等比缩放, 通常,假如设置,ht ...

随机推荐

  1. lua源码学习篇四：字节码指令

    在llimits.h文件中定义了指令的类型.其实就是32个字节. typedef lu_int32 Instruction; 上节说到变量最终会存入proto的数组k中,返回的索引放在expdesc ...

  2. 2018.03.30 abap屏幕标签保存之前执行过的状态

    REPORT ZZJX_TEST09. *&---------------------------------------------------------------------* TAB ...

  3. Golang http post error : http: ContentLength=355 with Body length 0

    参考:https://stackoverflow.com/questions/31337891/net-http-http-contentlength-222-with-body-length-0 问 ...

  4. 【MM系列】SAP 根据采购订单创建外向交货单的BAPI

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 根据采购订单创建外向交货单的 ...

  5. 【QT开发】QT在windows下的exe应用程序如何在别人的电脑上直接运行

     当你利用QT编译了一个可执行程序,需要将这个可执行程序拷贝到别人的电脑上运行,这个时候除了这个可执行程序外,还需要支持的库才可用运行.一般来说通过下面的方法可以实现.     首先,需要看你用的是什 ...

  6. Win10.Shift+鼠标右键_CMD(管理员)

    1.资料: 1.1.Windows10下设置Shift+右键增加cmd - wyx0712的博客 - CSDN博客.html(https://blog.csdn.net/wyx0712/article ...

  7. Mysql 5.7存储过程的学习

    存储过程:对sql的封装和重用,经编译创建并保存在数据库中,通过指定存储过程的名字并给定参数(需要时)来调用执行. 优缺点: (1) 优点: 执行速度快------存储过程只在创建时进行编译,以后每次 ...

  8. C#打印条码BarTender SDK打印之路和离开之路（web平凡之路）(转)

    C#打印条码BarTender SDK打印之路和离开之路(web平凡之路) 从来没想过自己会写一篇博客,鉴于这次从未知的探索到一个个难点的攻破再到顺利打印,很想记录这些点滴,让后人少走弯路. 下面走进 ...

  9. ARM之cache

    一. 什么是cache 1.1. cache简介 a. Cache 即高速缓冲存储器,是位于 CPU 与内存之间的高速存储器,它的容量比内存小但交换速度快. b. ARM处理器的主频为上百M甚至几G, ...

  10. 列表、元组和range

    小知识点 s = " 5 " print(int(s)) print(s.replace(" ","")) 结果: 5 5 id()#获取对 ...