css自适应网页(大作业版)
2023-06-13 09:13:10 时间
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验,而且随着大屏智能手机的普及,用“大势所趋”来形容也不为过。 要实现响应式布局,常用的方式有以下几种:
- 使用 CSS 中的媒体查询(最简单);
- 使用 JavaScript
- 使用第三方开源框架。
自适应网页
自适应网页效果
设置 meta 标签
/*超大屏幕大于等于1200px*/
@media screen and (max-width:575px){
.inner{
width: 100%;
}
.inner_hd{
padding: 30px 0;
}
.item li {
width: 50%;
}
.inner_hd h2{
font-size: 26px;
}
}
/*大屏幕大于等于992px*/
@media screen and (min-width:576px){
.inner{
width: 540px;
}
.item li{
width: 50%;
}
.inner_hd h2{
font-size: 30px;
}
}
/*中等屏幕大于等于768*/
@media screen and (min-width:768px){
.inner{
width: 720px;
}
.item li{
width: 33.3%;
}
}
/*小屏幕大于等于576*/
@media screen and (min-width:992px){
.inner{
width: 960px;
}
.item li{
width: 25%;
}
}
/*超小屏幕小于576*/
@media screen and (min-width:1200px){
.inner{
width: 1200px;
}
.item li{
width: 20%;
}
}
- viewport:即视口,表示网页的可视区域;
- width:控制 viewport 的大小,可以指定一个具体的值,例如 600,也可以是由关键字组成的特殊值,例如 device-width 就表示设备的宽度;
- initial-scale:表示初始缩放比例,也就是页面第一次加载时的缩放比例;
- maximum-scale:表示允许用户缩放的最大比例,范围从 0 到 10.0;
- minimum-scale:表示允许用户缩放到最小比例,范围从 0 到 10.0;
- user-scalable:表示用户是否可以手动缩放,“yes”表示允许缩放,“no”表示禁止缩放。
相关文章
- 水果忍者网页版
- 使用 selenium 写的多进程全网页截图工具,发现了 PhantomJS 截图的 bug
- 5个最佳拖放式WordPress网页生成器比较(2018)
- java 网页提示被阻止怎么办,应用程序已被java安全阻止怎么办
- Safari浏览器html5网页自动播放bgm
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)[通俗易懂]
- cefsharp修改html元素,CefSharp网页元素点击
- Chrome DevTools 远程调试安卓网页的原理
- CSS将整站网页变成黑白色调,致敬英雄!(2020年4月4日全国哀悼日)
- CSS filter-网页变灰
- CSS 美化网页元素
- 使用 fartscroll.js 让你的网页在滚动时放屁
- java采集网页 抓取网页详解编程语言
- HTML&CSS精选笔记_HTML与CSS网页设计概述详解编程语言
- 纯CSS + 媒体查询实现网页导航特效详解编程语言
- 爬虫第二课:解析网页中的元素详解编程语言
- java获取网页源码详解编程语言
- Microsoft Edge新功能:能更轻松地将网页保存为PDF文件
- 从网页轻松访问MySQL数据库(网页打开mysql数据库)
- CSS如何影响MySQL的使用(css影响MySQL)
- CSS设置网页的字体防浏览器浏览页面字体变形
- CSS网页布局入门教程7:二列固定宽度居中
- CSS网页布局入门教程9:用CSS设计网站导航——横向导航
- 让用户自己控制网页字体的大小的css书写方法
- css布局网页水平居中常用方法
- xhtml+css网页制作中常见问题解决方法
- 基于jQuery的网页右下角弹出广告(IE7,firefox)
- 用JQuery在网页中实现分隔条功能的代码
- JS添加网页桌面快捷方式的代码详细整理
- 几种延迟加载JS代码的方法加快网页的访问速度
- 优化Jquery,提升网页加载速度
- 使用asp.net改变网页上图片颜色比如灰色变彩色