css自适应网页（大作业版）
css自适应网页（大作业版）
干掉芹菜
发布于 2022-11-19 14:09:39
发布于 2022-11-19 14:09:39
代码可运行
运行总次数：0
代码可运行
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”表示禁止缩放。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
