CSS3——PC以及移动端页面适配方法(响应布局)
响应布局就是不同宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而使页面适应不同宽度。
<!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以及移动端页面适配方法(响应布局)的更多相关文章
- CSS3——PC以及移动端页面适配方法(流体布局)
流体布局:使用百分比来设置元素的宽度,元素的高度按照实际值. 但是流体布局中存在一个边框的问题,元素的边线无法计入百分比. 两种解决办法: 1)width:calc(20% - 4px) 2)widt ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- 移动端H5适配方法(盒子+图片+文字)
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
- pc和移动端页面字体设置
移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC” ...
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>我趣旅行网-美剧迷</ti ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- h5页面适配小结
大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...
- H5 前端页面适配响应式
辞职有半个月了,面试了几家公司,还在挣扎中.... 不废话,H5页面适配成响应式,可以用百分比或者rem. rem是相对于html根元素的单位,可以根据根元素的大小做出等比缩放, 通常,假如设置,ht ...
随机推荐
- 阶段3 1.Mybatis_03.自定义Mybatis框架_1.自定义Mybatis的分析-执行查询所有分析
- zstack分配的虚拟机的dns设置
环境: $ uname -a Linux 10-57-19-61 2.6.32-504.el6.x86_64 #1 SMP Wed Oct 15 04:27:16 UTC 2014 x86_64 x8 ...
- html5获取位置信息,h5获取位置信息
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 动态网页基础——JSP
WEB项目的目录结构 META-INT WEB-INF 对外都是不可访问的,不可把index.jsp/index.html 放这 JSP JSP是为了简化Servlet的工作出现的替代品,Servl ...
- linux常用终端指令+如何用vim写一个c程序并运行
在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...
- 【ABAP系列】SAP 系统的消息类型分析 MESSAGE TYPE
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 系统的消息类型分析 ME ...
- 操作系统(3)实验相关原理——bootloader启动uCore
x86启动顺序 CS+EIP决定启动地址. CS部分后面又4个0,相当于是左移了4位.总之就是要让CS左移4位之后加上EIP来得到要跳转的地址. 0x7c00地方开始的512字节的内容就是bootlo ...
- lsb-realse
[root@localhost ~]# lsb_release -a -bash: lsb_release: command not found 解决方法:yum install redhat-lsb ...
- Python_ONLINE_习题集_02 函数封装
2.1 封装函数实现如下要求 例如:输入2,5 则求:2 + 22+222 + 2222+22222的和 参考答案: https://www.bilibili.com/read/cv4185619 d ...
- uwsgi + nginx 部署python项目(一)
uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换. 要注意 WSGI / uws ...