前端页面布局之【响应式布局】

简介: 前端页面布局之【响应式布局】

🌟前言

现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端。


🌟优点

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

根据不同的显示器调整设计最适合用户浏览习惯的页面

🌟缺点

兼容各种设备工作量大,效率低下

代码累赘,会出现隐藏无用的元素,加载时间加长

其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果

因为要适应不同的设备,页面的结构可能会有所不同,会导致页面的辨识度不强

🌟@media兼容性

ie8及以下不支持 @media


Respond.js可帮助IE6-8兼容 "min/max-width" 媒体查询条件: Respond.js


使用方法:在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早,用户看到页面闪烁的机会越小。

🌟利用CSS3-Media Query实现响应式布局

media query:

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件


语法结构及用法:

@media设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}


在link中使用@media

screen:指的是一种媒体类型;

and:被称为关键词,与其相似的还有not,only。可能的操作符

max-width:600px这个就是属性值,媒体特性,也就是就是媒体条件。

<link rel="stylesheet" type="text/css" media="screen and (max-width:     600px)"href="link.css"/>

在样式表中内嵌 @media

@media screen andi (max-width: 600px) {
选择器 {
      属性:属性值;
      }
}

🌟常见的媒体类型

描述
all 默认。适用于所有设备。
print 打印预览模式/打印页。
screen 计算机屏幕。

🌟常见的操作符

描述
and 逻辑与,连接设备名与选择条件、选择条件1与选择条件2。
not 排除某种设备
only 限定某种设备类型
, 设备列表

🌟属性值

媒体特性 可用媒体类型 接受min/max 简介
width <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域宽度(单位一般为px)
heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备中的页面可见区域高度(单位一般为px)
device-width <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见宽度(单位一般为px)

device-heigth <length> 视觉屏幕/触摸设备 yes 定义输出设备的屏幕可见高度(单位一般为px)
orientation portrait /landscape 位图介质类型 no 定义’height’是否大于或等于’width’。值portrait代表是,landscape代表否即设,备手持方向:portait为横向,landscape为竖向
aspect-ratio <ratio> 位图介质类型 yes 定义’width’与’height’的比率,即浏览器的长宽比
device-aspect-ratio <ratio> 位图介质类型 yes 定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
device-aspect-ratio <ratio> 位图介质类型 yes 定义’device-width’与’device-height’的比率,即设备屏幕长宽比。如常见的显示器比率:4/3, 16/9,16/10
color-index <integer> 视觉媒体 yes 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
monochrome <integer> 视觉媒体 yes 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution <resolution> 位图介质类型 yes 定义设备的分辨率。如:96dpi,300dpi,118dpcm
scan progressive / interlace 电视类 no 定义电视类设备的扫描工序, progressive逐行扫描,interlace隔行扫描
grid <integer> 栅格设备 no 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否

🌟设备检测

  • Phone
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone.css" />

iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

🌟响应式阈值选取

响应式的阈值即不同设备宽度的临界值,该值由当前市面上设备分辨率比例得出,详见Statcounter

阈值 内宽 设备 描述
<768px auto 手机 超小屏幕
≥768px 750px 平板 小屏幕
≥992px 970px 桌面显示器 中等屏幕
≥1200px 1170px 大桌面显示器 大屏幕

🌟简单案例查看

F12打开控制台,控制台置与浏览器右侧,拖动观察页面变化

案例一:StatCounter Global Stats - Screen Resolution Market Share

案例二:苹果官方

案例三:Bootstrap

目录
相关文章
|
前端开发 容器
前端页面布局之【Flex布局】详解
前端页面布局之【Flex布局】详解
476 0
|
前端开发 容器
前端页面布局之【Grid布局】详解
前端页面布局之【Grid布局】详解
962 0
|
12月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
260 2
|
编解码 前端开发 JavaScript
WEB前端响应式布局之BootStarp使用
WEB前端响应式布局之BootStarp使用
81 0
|
前端开发
前端:html页面布局总是有问题?会这一个技巧就够了!
前端:html页面布局总是有问题?会这一个技巧就够了!
|
前端开发
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构3
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构3
77 0
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构3
|
前端开发
前端页面布局基础💕(一)
首先我们来了解一下盒子模型与行内块元素
309 5
前端页面布局基础💕(一)
|
前端开发
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构1
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构1
158 0
|
前端开发
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构2
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构2
120 0
|
前端开发
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构4
前端学习笔记202306学习笔记第四十五天-uniapp-页面布局结构4
140 0

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    68
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    331
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    367
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    559
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    347
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    355
  • 7
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    204
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    411
  • 9
    详解智能编码在前端研发的创新应用
    440
  • 10
    智能编码在前端研发的创新应用
    319