响应式开发网站

最新推荐文章于 2025-05-25 13:41:57 发布

weixin_33749242

最新推荐文章于 2025-05-25 13:41:57 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：https://segmentfault.com/a/1190000008598829

本文介绍了响应式布局的优点和缺点，包括不同屏幕尺寸下的布局表现，并探讨了媒体查询的应用及常见浏览器的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FlexLayout

https://github.com/whhlulu/Re...

响应式布局，先看效果

大屏效果：>50rem

中屏效果：>30rem, <=50rem

小屏效果：<30rem

下面是一些笔记心得

================================================
PART I：
响应式网站的优点：
1 减少工作量
1）网站，设计，代码，内容都只有一份
2）JS,CSS做少量更改
2 节省时间
3 多个分辨率设备都能正确显示
4 搜索优化

缺点：
会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器的兼容问题

================================================
PART II：
主流浏览器
Chrome
IE/Edge（Edge : > 12)
Firefox
QQ（微信采用QQ浏览器X5的内核）
Safari/iOS Safari
360
UC
猎豹

================================================
PART III：
媒体查询 1
@media all and(min-width:800px) and (orientagion: landscape){

...

}

逻辑操作查询符：not and only , (, 等同于 or)

css3媒体属性

width: 视口宽度
height: 视口高度
device-width: 渲染表面的宽度，就是设备屏幕的宽度
device-height:渲染表面的高度，就是设备屏幕的高度

orientation:检查设备处于横向/纵向
aspect-ration:基于视口的宽高比
device-aspect-ratio: 渲染表面的宽度，就是设备屏幕的宽度
color:每种颜色的位数bits，比如 min-color:16位，8位
resolution:检测屏幕或打印机的分辨率，如： min-resolution:300dpi

以上属性都可以添加 min- 或 max- 前缀

================================================
媒体查询 2
width: 视口宽度
device-wdith

viewport 视口
针对PC，只有一个视口
针对移动设备，有三个视口：
布局视口(layout viewport)
可视视口(visual viewport)
理想视口(ideal viewport)

===============================================
强制使用最新版本的IE文档模式

<meta http-equiv="x-ua-compatible" content="id=edge">

===============================================
cssreset.css 用来消除所有浏览器在一些默认样式上面的差异
normailize.css 是 cssreset.css 的优化版本，使用更加广泛

===============================================
长度单位： px, em, rem
使用相对的值，不同的显示屏尺寸会有变化
px : 固定的单位
em : 相对的长度单位，参照了父元素的font-size，具有继承的特点，如果一直找父容器都找不到font-size，那会使用浏览器的默认em设置：1em = 16px
rem ：也是使用相对值，不过是参照了 html 元素，浏览器的默认值也是：1rem = 16px