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

<!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. kubernets监控

    Weave Scope 容器地图   创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其职,有足够的资源满足应用的需求.Kub ...

  2. HTML5 表单的补充+注意事项

    input标签中  type="image" 与 type="submit"属性   的区别    (下文简写image和submit) 1.这两者都可以响应请 ...

  3. iptables规则

    iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分 iptables文件设置路径:命令:vim /etc/sysconfig/iptables-config 0x02 ...

  4. Java回调机制的理解

    用一句话讲明回调机制就是,在A类里面拥有一个类B的对象,调用B类的某个方法并把自身引用传入,在B类的这个方法里面又通过传进来的A的引用来调用A类的某个方法(这个最后调用的A类的方法就叫做回调方法). ...

  5. Linux setup

    Install centos 7: Config Network a config example in /etc/sysconfig/network-scripts/ifcfg-ens160 TYP ...

  6. 2.proxychains----Macchanger----anonsurf

    nano /etc/proxychains.conf 激活dynamic_chain 同是启用proxy_dns 只启用IP会泄露DNS位置信息,别人就知道你在用匿名 ipconfig    ifco ...

  7. 【Qt开发】V4L2 API详解 背景知识 打开设备设置参数

    www.linuxtv.org下,有篇文档详细讲解了V4L2相关知识和体系结构.是V4L2方面最全面的文档.可以通过它学习V4L2的一些思路和想法. http://www.linuxtv.org/do ...

  8. JS刷新后回到页面顶部

    window.location.href = location.href; 方法一: $(window).scrollTop(0); 方法二:$('html ,body').animate({ scr ...

  9. Vue-cli项目与element导航菜单控件的结合使用以及遇到的问题

    1.基本使用 第一种常用写法:导航菜单与 router-view 的配合使用 将所用的导航菜单数据编写成一个数组的形式,提高维护性: 在utils工具文件夹中建立utils.js文件: import ...

  10. Simplify Path（路径简化）

    问题: 来源:https://leetcode.com/problems/simplify-path Given an absolute path for a file (Unix-style), s ...