前端响应式布局原理与方案 详解前端响应式布基础知识

一.背景介绍随着智能定位器的快速发展,大众群体使用***上网的频率大大增加,***屏幕相对较小,宽度通常在600像素以下;PC的屏幕宽度一般在1000像素以上(目前主流宽度为1366768),有的甚至达到2000像素。同样的内容在不同尺寸的屏幕上显示出满意的效果并不容易。如何适应这种...

一.背景介绍

随着智能定位器的快速发展,大众群体使用***上网的频率大大增加,***屏幕相对较小,宽度通常在600像素以下;PC的屏幕宽度一般在1000像素以上(目前主流宽度为1366×768),有的甚至达到2000像素。同样的内容在不同尺寸的屏幕上显示出满意的效果并不容易。如何适应这种传统网页只能在pc端显示的趋势,成为人们开始关注和解决的问题。因此,提出了响应式布局的概念。

二、什么是响应式布局?

响应式布局,简而言之就是一个网站可以兼容多个终端,而不是为每个终端做一个特定的版本。这个概念的诞生是为了解决移动互联网浏览的问题。响应式布局可以为不同终端的用户提供更舒适的界面和更好的用户体验,而随着大屏移动设备的普及,用“大势所趋”来形容也不为过。

三,响应式布局的优势

1.响应式设计可以为用户提供友好的网络界面,同样的布局,但在不同的设备上有不同的排版。这是响应式设计的最大优势。如今科技飞速发展,每天都会有新的智能定位器推出。如果你有响应式的网页设计,用户可以一直和网站保持联系,这是基本的,也是响应式实现的初衷。

2.跨平台和终端,无需分配子域。

3.它对于不同分辨率的设备是灵活的。

四。响应式布局的缺点

1.响应式设计为了适应不同的设备,需要大量专门为不同设备构建的css和js代码,导致文件变大,效率低下,代码繁琐,隐藏无用元素,加载时间变长,影响页面加载速度。其实这是一个折中的设计方案,由于各种因素的影响,无法达到最好的效果。

2.响应式设计中,图片、视频等资源一般都是统一加载的,导致在低分辨率电脑上实际加载的图片或视频大于其显示需求,造成不必要的流量浪费,影响加载速度。

3.移动端和电脑端的很多交互组件有很大的不同,比如:日期选择控件。电脑端更多的是弹出选择控件,移动端是picker选择。在响应式布局中,很难在不同的平台上使用不同的交互组件。

4.计算机的生态相对简单。一般只需要考虑各种浏览器的兼容性,但是移动端的生态比较丰富。移动端的h5页面,微信的微信官方账号h5,小程序中的h5,都连接了各个生态的api函数。在一套代码中,需要判断不同的生态采取不同的程序分支,这对代码维护提出了极高的要求。

五、适合响应式布局的应用。

内容型、信息型网站非常适合响应式布局,比如官网、新闻网站、审批网站等。这类网站主要用于内容浏览和确认,用户交互较少,只需要根据不同的屏幕大小调整页面内容显示即可。

不及物动词不适合响应式布局的应用

大型门户网站、电商网站、后台管理应用不适合响应式布局,因为响应式设计的基本原理是不会因为设备不同而给用户不同的内容(比如会从低分辨率设备上删除一些内容),这些网站有大量的单页内容。当它们沦为低分辨率设备,所有内容都必须浏览时,必然导致页面拉长,浏览难度增加。所以很多大型门户网站或者电子商务网站都会提供一个移动设备版的网站。为不同设备提供优化的浏览体验绝对是网站发展的目标,也是网站技术发展的趋势。但响应式设计只是实现这一目标的手段之一,只适用于某些类型的网站,不能一概而论。

本文来自安安分分做我自我投稿,不代表舒华文档立场,如若转载,请注明出处:https://www.chinashuhua.cn/24/539736.html

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
() 0
上一篇 05-09
下一篇 05-09

相关推荐

  • 前端代码混淆怎么做 jar包加密防止反编译

    为了更好地理解混淆在编程中是如何工作的,下面是世界各地的开发人员使用的一些最常见的混淆安全技术。七种常见的源代码混淆技术1.数据变换源代码混淆的一个重要元素是将程序处理的数据转换成另一种形式,这种形式对代码的性能影响最小,但却增加了黑客分解或逆向工程的难度。

    2023-07-27 03:32:01
    219 0
  • 前端使用vue的好处 vue的特点及优势

    今天我们就来看看vue3相对于vue2的优势。其中有哪些?为什么有人说:既然写了ts vue3,就再也回不到vue2了!vue3有什么好的?有的人回不了vue2,有的人回不了vue3!喜欢自己喜欢的收藏,复盘后不会迷路!1.Vue3的几个新亮点:Perfor***nce:性能优化Tree-shaking :支持摇树优化

    2023-07-23 06:09:01
    340 0
  • mybatis插件原理 web前端三大主流框架

    一、导言在我们的日常开发工作中,不可避免的要检查当前程序执行的SQL语句,方便程序员解决问题。MP提供了两种方式来输出每个SQL语句及其执行时间。对于执行时间较长的SQL,可以停止运行,有助于发现问题。这两种方法只适用于开发环境,不推荐用于生产环境。二。性能分析插件

    2023-07-23 05:31:01
    160 0
  • 前端js把json字符串转json对象 java对象转json对象命令

    最近在逛编程问题答案的时候看到了这个问题:如何将一个JSON数组类型的字符串转换成JSON数组,然后遍历数组取出JSON对象,最后在JS中取出它的属性。在这里,我想给同样有疑问的朋友们一些解答。当然,也欢迎大家在大神留言区留下更好的答案。首先我们回到源头问一下,JSON到底

    2023-07-19 04:55:01
    345 0

评论列表

联系我们

在线咨询: QQ交谈

邮件:admin@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信