自适应 | 易学教程

div内容文字自适应

阅读更多关于 div内容文字自适应

神马都不用说了先来张图下面是代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .mDiv{ background-color: red; width: 100%; height: 40px; line-height: 40px; color: black; font-size: 20px; display: inline; padding: 10px 15px; border-radius: 25px; margin-left: 20px; } </style> </head> <body> <div class="mDiv"> div里面的文字自适应 </div> <div class="mDiv"> div里面的文字自适应 div里面的文字自适应 div里面的文字自适应 div里面的文字自适应 </div> </body> </html> 来源： CSDN 作者： chmod_R_755 链接： https://blog.csdn.net/chmod_R_755/article/details/72842774

如何让图片自适应不同屏幕宽度，并居中显示。

阅读更多关于如何让图片自适应不同屏幕宽度，并居中显示。

我们在浏览网站的时候发现，很多网站的banner图片都是全屏宽度。这种图片都是在不同分辨率下都是显示图片的中间部分，这里我们介绍两种方式，第一种就是常见的方式，用定位我简单定义为三部曲： - 让包裹图片的盒子绝对定位， - left:50%, - Margin-left：图片宽度的一半看例子吧： <!DOCTYPE html> < html lang = "en" > < head > < title > Title </ title > < style > * { margin : 0 auto ; } .bannerbox { position : relative ; overflow : hidden ; height : 410 px ; } .banner { width : 2000 px ; /*图片宽度*/ position : absolute ; left : 50 % ; margin-left : - 1000 px ; /*图片宽度的一半*/ } </ style > </ head > < body > < div class = "bannerbox" > < div class = "banner" > < img src = "img/slide_04_2000x410.jpg" > </ div > </ div > </ body >

移动端h5开发分辨率自适应

阅读更多关于移动端h5开发分辨率自适应

在做H5开发时，都会遇到屏幕分辨率自适应问题，那么怎么更好地让页面自适应？这里介绍一种用js计算屏幕宽度+rem单位的方法（网易新闻在用）不同手机有不同的分辨率，UI在做设计图的时候大都会以iPhone6/7/8的分辨率为标准，即375×667，像素比为2，所以我们这里计算屏幕宽度，并以750（375*2）为标准，修改页面的font-size。js实现如下：这样在项目中所有的单位都用rem（rem是基于html元素的字体大小来决定），且px:rem=100:1，即30px转换为rem即.3rem。以上就是实现方法，下面看效果，这样在页面的html标签里会出现整个页面的font-size 但有个缺点是，每次更改屏幕尺寸，只有刷新才能重新计算宽度，调试时可能繁琐点，应该有更好的方法解决这个问题，之后再更新。来源： CSDN 作者： Joy__Yue 链接： https://blog.csdn.net/wy6250000/article/details/83309430

如何制作一个自适应手机、电脑、ipad的网页方法总结大全

阅读更多关于如何制作一个自适应手机、电脑、ipad的网页方法总结大全

今天春哥技术博客和大家一起分享下当下如何制作一个自适应手机、电脑、ipad的网页方法，手机上网的用户已经越来越多，已经赶超PC端。随着2G、3G、4G、免费WIFI和无线基站的不断普及，越来越多的人开始使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ \ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？ \ 一、"自适应网页设计"的概念 2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是

蓝牙跳频算法分析

阅读更多关于蓝牙跳频算法分析

1.概述 1.1.为什么需要跳频 WLAN和基于IEEE 802.11规范的无线设备与蓝牙一样，在无需许可的2.4 GHz ISM（工业，科学和医疗）无线电频段中运行。为了改善在该环境中的相同规范设备的通讯性能，SIG引入了自适应跳频的技术AFH（advance frequence hopping），以减少这种干扰的影响。该跳频技术可以通过各种方法实现，每种方法都有其固有的优点和缺点。在AFH解决方案出现之前开发的蓝牙产品采用另一种形式的跳频，其跳频在设计上是随机的。这些第一代蓝牙设备使用2.4 GHz频段中的83.5个可用频道中的79个，以随机方式跳过这些频道，速率为每秒1600次。一旦将另一个无线设备引入环境中，这种类型的跳跃就会导致偶尔的冲突。没有AFH蓝牙缺乏避免这些冲突的能力，从而适应其环境。结果如下图所示，显示了蓝牙（BT）和无线LAN（WLAN）都在运行的环境。与上述相反，自适应跳频AFH允许蓝牙通过识别固定的干扰源并将其从可用信道列表中排除来适应环境。这种重新映射过程还涉及减少蓝牙使用的信道数量。蓝牙规范要求至少20个信道的最小集合。下图显示了与上图相同的环境，但现在使用了自适应跳频后的蓝牙通讯信道。 2.Classic 跳频经典蓝牙跳频框架如下所示：有一个Channel map，即为跳频表，一个跳频阶跃；根据跳频表和跳频阶跃和当前通讯频点

前端可视化页面自适应

阅读更多关于前端可视化页面自适应

响应式布局-flex em 相对父元素的font-size rem 相对长度单位，相对于根元素font-size计算值的倍数 vw(viewport width) 视窗宽度，1vw = 视窗宽度的1% vh(viewport height) 视窗高度，1vh = 视窗高度的1% 方案整体布局：flex+百分比，从内到外都用百分比 css最小宽高设置：min-width、min-height，在页面过小时增加滚动条 box-sizing: border-box css字体设置：rem margin/padding : vh、vw echarts图表字体：自定义一个fontSize(num)函数，在大屏调好合适的数，在option配置参数时使用fontSize(num) //util.js export const fontSize = function ( num ) { let clientWidth = window . innerWidth || document . documentElement . clientWidth || document . body . clientWidth ; if ( ! clientWidth ) return ; let fontSize = clientWidth / 1920 ; return num * fontSize ; }