Bootstrap pc pad phone 响应式布局

主页面 media.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>响应式布局演示实例(Medias Query)</title><style>body,h2{margin:0px;padding:0px;color:white}section#main,header,aside,footer{background:pink;margin:5px 0;}h2 {text-align:center;foot-size:3em}section#container{margin:0 auto;width:960px;}header {float:left;width:100%;line-height:100px;}#left {float:left;width:200px;line-height:400px;}section#main {float:left;width:540px;line-height:400px;margin-left:10px;}#right {float:right;width:200px;line-height:400px;}footer {float:left;width:100%;line-height:80px;}</style>/*1000px 以上屏幕显示*/<link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="pc.css" />/*pad 640-1000px 屏幕显示*/<link rel="stylesheet" type="text/css" media="screen and (min-width:640px) and (max-width:1000px)" href="pad.css" />/*phone 640px以下 屏幕显示*/<link rel="stylesheet" type="text/css" media="screen and (max-width:639px)" href="phone.css" />
</head>
<body><section id="container"><header><h2>Header</h2></header><aside id="left"><h2>Left</h2></aside><section id="main"><h2>Main</h2></section><aside id="right"><h2>Right</h2></aside><footer><h2>Footer</h2></footer></section>
</body>
</html>

PC端 pc.css

/*1000px 以上屏幕显示*/h2{color:yellow;font-size:4em}section#container{width:1160px;}section#main {width:740px;}

pad端pad.css

/*pad 640-1000px 屏幕显示*/h2 {color:green;font-size:2.5em}section#container{width:600px;}#left {width:160px;            }section#main{width:430px;}#right {display:none;}

phone端 phone.css

    /*phone 640px以下 屏幕显示*/h2 {color:red;font-size:1.5em}section#container {width:400px;}#left {float:left;width:100%;line-height:100px;}section#main {float:left;width:100%;line-height:200px;margin-left:0px;}#right {float:left;width:100%;line-height:100px;display:none;}

浏览器输出

pc端

pad端

phone端

转载于:https://blog.51cto.com/11410485/1845515

Bootstrap pc pad phone 响应式布局相关推荐

vue 移动端与PC端的响应式布局整理
响应式布局大概就是三种方法: 首先必须在页面头部必须有mate声明的viewport, **1,**百分比布局.就是margin,padding啥的都是百分比. **2,**媒体查询(@media), ...
BootStrap之前奏响应式布局
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架一.响应式布局 1.1 历史问题回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...
Vue2实现响应式布局方案
1.可以实现Vue移动端和PC端的响应式布局适配实现方法:通过 postcss-px-to-viewport 来自动将我们开发时的px单位计算转换为vw视口单位,完成响应式布局 . 安装插件 npm ...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多,有PC.iPad.手机.智能手表.智能电视.如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局. i ...
bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
前端使用bootstrap实现一个简单的小案例，重点是关注响应式布局
1.案例的效果展示我们使用的是响应式布局,所谓的响应式布局就是可以使得同一套页面可以兼容不同分辨率的设备.可以看到苹果的官网当你将浏览器的串口放的很小的时候网站的布局也会随这页面大小发生变化,当我们 ...
移动web开发 17-1 响应式布局 bootstrap首页框架阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法当屏幕宽度<=768 ...
BootStrap #响应式布局 #组件
响应式布局 1.啥叫响应式:根据浏览器页面的设备不同自动的改变布局图片文本不会影响体验 2.编写响应式的网页: (1)视口<meta name="viewport" ...
uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】
实现目标:uniapp一套式制作pc端.pad端.手机端.符合国家等保二级标准. 目录技术分析 pc端(pad端)与移动端的开发区别 1. 用户操作习惯. 2. 界面区别. 3. 表格区别 4. 技 ...

Bootstrap pc pad phone 响应式布局

Bootstrap pc pad phone 响应式布局相关推荐

最新文章

热门文章