html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言
现在的设备很多,有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局。
index
响应式布局
CSS
*{
margin: 0;
padding: 0;
}
/*适应PC端 宽度大于1000px*/
@media screen and (min-width: 1000px) {
#content{
width: 960px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-right: 10px;
}
#center{
width: 540px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: right;
font-size: 30px;
color: #fff;
}
#footer{
width: 960px;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
/*适应pad端 宽度在640-1000之间*/
@media screen and (min-width: 640px) and (max-width: 1000px) {
#content{
width: 600px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 200px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-right: 10px;
}
#center{
width: 390px;
line-height: 400px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 600px;
line-height: 300px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-top: 10px;
}
#footer{
width: 600px;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
/*适应移动端 宽度小于640*/
@media screen and (max-width: 639px){
#content{
width: 400px;
margin:0 auto;
}
#header{
width: 100%;
line-height: 100px;
float: left;
background: #333;
color: #fff;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}
#left{
width: 100%;
line-height: 150px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-bottom: 10px;
}
#center{
width: 100%;
line-height: 300px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
}
#right{
width: 100%;
line-height: 150px;
text-align: center;
background: #333;
float: left;
font-size: 30px;
color: #fff;
margin-top: 10px;
}
#footer{
width: 100%;
height: 200px;
background: #333;
color: #fff;
line-height: 200px;
font-size: 30px;
text-align: center;
float: left;
margin-top: 10px;
}
}
通过@media screen and (限制范围) 来控制网页的布局,例如
min-width代表最小的限制,max-width代表最大的限制。
PC端
Pad端
Phone端
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备相关推荐
- 【css】响应式布局 @media媒介 适配平板手机
// 大型设备(大台式电脑,1200px 起) @media screen and (min-width:1200px) {//... }// 中型设备(台式电脑,992px 起) @media sc ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- window safari 怎么进入响应式_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- 在html中写响应式布局的代码,CSS实现响应式布局的方法
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
- html 响应式布局怎么实现,CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中 ...
- html页面高度设为自动,html – CSS:响应式布局中的高度自动问题
没有固定的正确高度.如果我在css中设置固定高度,则在响应式布局中,图像将不会以正确的宽高比调整大小. 主要问题是css根据src-attribute设置的图像计算自动高度和宽高比,而不是width- ...
- css实现响应式布局
一.什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了.响应式设计与自适应设计的区别:响应式开 ...
- html+css实现响应式布局入门
什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而 ...
- 自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
最新文章
- python画笑脸图案-如何让这些代码中的一个在窗口中绘制不同大小的笑脸?
- 使用nvl就不能groupby了吗_宝妈月子期间真的不能吃酱油、醋、葱姜蒜吗?金牌月嫂教你月子餐调味料使用大全!...
- 如何使用 Python 进行时间序列预测?
- Python基础概念_14_常见术语
- arduinowifi.send怎么获取响应_ChatterBot代码解读-获取对话
- 问题:android学习内容破碎,我个人关于如何学习android的一些个人经历
- Python中类与对象的关系
- Docker 安装 MySQL5.7
- SQL 已死,NoSQL 才是王道?|原力计划
- 使用Git将本地文件夹同步至github
- 机器学习与深度学习基础概念介绍
- 【codemirror】Json编辑器使用总结
- Rtmp协议看一篇就够了
- 网易严选App感受Weex开发
- linux can总线接收数据串口打包上传_【Linux应用】CAN总线编程
- 如何利用计算机处理,旧电脑如何处理?去卖回收教你几招!榨干闲置电脑最后一丝价值!...
- JAVA特点优点以及环境
- Java员工管理系统(控制台输出)
- 收集oracle统计信息
- MAC地址修改方法(解决teamviewer访问超时限制的问题)亲测可用(文后有惊喜)
热门文章
- 自制香浓芝麻酱的做法,重庆顶香味的老师傅手艺
- U盘出现乱码怎么办?教你如何恢复
- 单列表变量与字符串拆分的对照(SqlServer)
- python批量操作word文档实战_python批量实现Word文件转换为PDF文件
- 机器学习分类常见评价标准
- 《科学》封面:人工智能终于能像人类一样学习 zz
- 使用selenium+Chrome()无图版模拟浏览器进行抓取淘宝商品信息
- oracle添加clob字段,oracle数据库clob字段处理
- top命令参数详解_Linux、AIX的top命令各项指标详解(非原创侵删)
- 爬虫(一)爬虫原理和网页构造