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

<!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. Spring mvc注解说明

    编号 注解 说明 位置 备注 1 @Controller 将类变成Spring Bean 类 现阶段 @Controller . @Service 以及 @Repository 和 @Componen ...

  2. Javascript实现的图片隐写术

    javascript图片隐写术,感觉可以用它来干点有想法的事情   1.什么是图片隐写术? 权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学,所谓信息隐藏指的是不让除预期的接收者之外的任何人 ...

  3. python 并发编程 多进程 Process对象的其他属性方法 join 方法

    一 Process对象的join方法 在主进程运行过程中如果想并发地执行其他的任务,我们可以开启子进程,此时主进程的任务与子进程的任务分两种情况 情况一: 在主进程的任务与子进程的任务彼此独立的情况下 ...

  4. Linux操作系统目录一览表

    / // 根目录 /bin //存放必要的命令 比如ls.cp.mkdir等命令 /boot //存放内核以及启动所需的文件 /dev //存放硬件设备文件 比如声卡.磁盘.光驱 /etc //存放系 ...

  5. disabled_button 按钮按不下去

    X老师今天上课讲了前端知识,然后给了大家一个不能按的按钮,小宁惊奇地发现这个按钮按不下去,到底怎么才能按下去 检查元素 删除 按钮就可以摁了 出现答案

  6. 编写Servlet步骤以及Servlet生命周期是怎样的

    一.编写Servlet步骤 1.继承HttpServlet,HttpServlet在javax-servlet-api依赖下 2.重写doGet()或者doPost()方法 3.在web.xml中注册 ...

  7. P1056排坐椅

    这是2008普及组真题,是一个提高—的模拟. 仔细读完题便有了思路:累放在i行能隔开wi个,比较排序wi,输出即可.所以在这里遇到了结构体排序的问题与手写cmp的问题.对于两个语法知识掌握得都不好,所 ...

  8. GUI程序原理分析

    1,Qt 是一套跨平台的程序设计库,这套程序设计库主要用于 GUI 方面的程序设计开发,所以本系列博文主要是利用C++介绍 GUI 程序设计技术: 2,命令行应用程序: 1,命令行应用程序的特点(Co ...

  9. c++多线程并发学习笔记(2)

    等待一个时间或其他条件 在一个线程等待完成任务时,会有很多选择: 1. 它可以持续的检查共享数据标志(用于做保护工作的互斥量),直到另一个线程完成工作时对这个标志进行重设.缺点:资源浪费,开销大 2. ...

  10. GeoAdapter实现WMS、WMTS、ArcGIS MapService的区域权限授权管理

    背景: 在实际GIS应用中,我们经常会发布GIS地图服务,然后供WebGIS调用.在某些特殊情况下,需要对服务进行区域授权,特定的用户只能够浏览特定范围内的地图数据.通常情况下大家采用的实现方式是使用 ...