如何实现在各种分辨率下网站的优良阅读体验？

最新推荐文章于 2024-09-10 22:58:41 发布

austin_he2020

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量10w+

点赞数 1

本文链接：https://blog.csdn.net/austin_he2020/article/details/108278902

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言

老大：“开发哥，在手机上打开咱们这网站怎么都缩小挤到一坨了？”
开发哥：“老大，咱们这网站都是照着设计师给的尺寸写死的，只有在固定尺寸的屏幕上才显示正常……” 老大：“那我要你有锤子用？没吃过猪肉，还没见过猪跑啊，我最近发现快递 100 云平台居然是响应式的，咱们不能落后；还愣着干嘛？赶紧去学学！”

说到屏幕适配，就离不开响应式布局，传统的开发方式是 PC 端开发一套，手机端开发一套，而使用响应式布局只需一套即可。

响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是 pc 端、平板、手机，从而请求服务层，返回不同的页面。

响应式布局实现方案

媒体查询
CSS3 媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，但如何选择屏幕大小分割点也是一个需要考虑的要点，比如我们可以划分：480px, 800px, 1000px 1400px。
我们可以参考参考 Bootstrap 这位老大哥是如何断点的：

当然，这个方案不一定能满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。
栗子：

/* iphone6 7 8 */ body {
background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) { body {
background-color: red;
}
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) { body {
background-color: #0ff000;
}
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) { body {
background-color: blue;
}
}
/* ipad */
@media screen and (min-width: 768px) { body {
background-color: green;
}
}
/* ipad pro */
@media screen and (min-width: 1024px) { body {
background-color: #ff00ff;
}
}
/* pc */
@media screen and (min-width: 1100px) { body {
background-color: black;
}
}

百分比布局
通过百分比也是一个兼容性较好，也相对简单的方案，但缺点是不太精确，一般只适合等比例、大分块的场景。
而百分比也是有相对性的，如下：
1、子元素的height 或width 中使用百分比，是相对于子元素的直接父元素， width 相对于父元素的width ， height 相对于父元素的height ；
2、子元素的top 和bottom 如果设置百分比，则相对于直接非static 定位(默认定位)的父元素的高度，同样子元素的left 和right 如果设置百分比，则相对于直接非static 定位(默认定位的)父元素的宽度；
3、子元素的padding 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的
width ，而与父元素的height 无关。
4、跟padding 一样， margin 也是如此，子元素的margin 如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width ；
5、border-radius 不一样，如果设置border-radius 为百分比，则是相对于自身的宽度，除了
border-radius 外，还有比如translate 、 background-size 等都是相对于自身的；
rem 布局
rem单位都是相对于根元素html 的font-size来决定大小的,根元素的font-size 相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而 em 是相对于父元素的）。
在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。
一个简单实现 rem 配置的栗子：

function refreshRem() {
var docEl = doc.documentElement;
var width = docEl.getBoundingClientRect().width; var rem = width / 10;
docEl.style.fontSize = rem + "px"; flexible.rem = win.rem = rem;
}
win.addEventListener("resize", refreshRem);

视口单位
css3中引入了一个新的单位 vw/vh ，与视图窗口有关， vw 表示相对于视图窗口的宽度， vh 表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各
个单位具体的含义如下：

其实这类似于百分比布局，区别主要在于兼容性及相对性，兼容性不如百分比，但计算方便；且它是相对于当前视口而言的。
图片响应式
这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。
1.大小自适应：

img {
display: inline-block; max-width: 100%; height: auto;
}

	2.切换图片：

<!-- 根据屏幕尺寸加载对应图片 -->
<picture>
<source srcset="banner_w1000.jpg" media="(min-width: 801px)" />
<source srcset="banner_w800.jpg" media="(max-width: 800px)" />
<img src="banner_w800.jpg" alt="" />
</picture>

文字响应式
文字响应式一般两个方案：一个是采取方案进行适配，但需要考虑到一个节点，如最小
只显示的字体，所以我们要考察当缩放到一定尺寸时就将该字体大小固定，以免影响用户体验。
另一个就是不做适配，即采取固定字体大小，在一些项目所需展示的平台尺寸跨度不是很大的情况下，这种方案也是可以满足用户体验的，而且不用考虑自适应时字体过大和多小的缺点。

响应式布局成型方案

现在的 css ， UI 框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：