react网页适配不同分辨率_前端页面适应不同分辨率

前端开发要考虑到不同分辨率电脑的页面展示问题，在开发者电脑上的界面在用户电脑上打开可能出现很大变形。

解决方案主要有：

针对不同分辨率用户设置不同的css

使用JS/jQuery动态调整

使用前端框架

简单介绍一下：

针对不同分辨率用户设置不同的css(不推荐)

即针对不同的分辨率，开发不同的css样式，在界面加载时，先判断用户屏幕分辨率，在应用相应的css

相比较，这种方法最复杂，而且如果系统面向大众，需要作很多不同的css

推荐文章：PC端页面适应不同的分辨率的方法

使用前端框架

针对不同分辨率展示问题，有很多大牛开发了诸多框架，最为知名的即Bootstrap,也是github上最为知名的框架

Bootstrap提供了许多css样式，在标签中应用这些样式后，前端页面即可自动针对不同分辨率调整显示样式。此外，Bootstrap还开发了一些常用前端控件，如轮播、导航栏、进度条等等。

Bootstrap的学习也较为简单。

相比较，这是最一劳永逸的方法，学会后可以很简单的进行前端工程开发，相当省事。Bootstrap(及其他同类前端框架)必定是前端开发的趋势。

使用JS/jQuery动态调整

这种方法只适合于要调整的页面元素较少的情况，如果分辨率改变后，页面中很多元素都有变形，而且页面整体变得混乱，不适合使用此方法。

常用的方法有：

获取屏幕宽度/高度/分辨率，针对各种情况设置样式

var screenw=screen.width;

switch (screenw){

case 1920:

$('.Hhandle').attr('data-height',343);

break;

case 1536:

$('.Hhandle').attr('data-height',373);

break;

}

获取屏幕宽度/高度/分辨率，找到其与样式之间的关系

var screenw=screen.width;

var setwidth=503.1942591335728-0.0836961379926832*screenw

$('.Hhandle').attr('data-height',setwidth);

————————————————

原文链接：https://blog.csdn.net/ScapeD/article/details/86553672

react网页适配不同分辨率_前端页面适应不同分辨率相关推荐

前端页面适应不同分辨率
前端开发要考虑到不同分辨率电脑的页面展示问题,在开发者电脑上的界面在用户电脑上打开可能出现很大变形. 解决方案主要有: 针对不同分辨率用户设置不同的css 使用JS/jQuery动态调整使用前端框架 ...
前端基础(一)_前端页面构成
一.前端页面构成 1.HTML(Hypertext Markup Language) Html–超文本标记语言, 结构层由HTML标记语言创建的,负责页面的语义.(它包括一系列标签,主要分为块标签和行 ...
台式电脑怎么调分辨率_怎么调电脑的分辨率
很多人会问电脑的分辨率是什么?电脑屏幕分辨率该怎么调?分辨率调到多少是最合适呢?其实电脑无论是笔记本还是台式,大家都希望在浏览网页的时候有一个舒适的眼界,如何调整电脑屏幕分辨率至最佳,最有利于观看呢? ...
react网页适配不同分辨率_PC端页面适应不同的分辨率的方法（转载）
上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率. 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目. 现在 ...
前端vue适配不同的分辨率_前端面试时，被问到项目中的难点有哪些？
在每个前端求职者的面试过程中,一定都有过被面试官问到项目中的难点,而答不上来的情况.为了让大家在前端面试前准备得更加充足,小编准备了一些易被忽视且难度较高的前端面试题,希望可以帮助大家更加顺利完成求职 ...
react如何遍历并比较_[前端进阶] 这可能是最通俗易懂的React 渲染原理及性能优化...
如今的前端,框架横行,出去面试问到框架是常有的事. 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家. React 是什么 React是一个专注 ...
python网页版百度_python,_爬虫页面不存在_百度搜索，python - phpStudy
爬虫页面不存在_百度搜索 1.学写爬虫,遇到一个问题,加了values={"wd":"test","ie":"utf-8&quo ...
一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...
python界面卡顿_前端页面卡顿、也许是DOM操作惹的祸？
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...

react网页适配不同分辨率_前端页面适应不同分辨率

react网页适配不同分辨率_前端页面适应不同分辨率相关推荐

最新文章

热门文章