本人新手,判断不同分辨率显示不同宽度布局实现自适应宽度! 10

本人新手,判断不同分辨率显示不同宽度布局实现自适应宽度!不要复制粘贴,我把代码放入后退出刷新一下,之前放入的代码全部消失,求解,有没有简单快速的办法?怎么插入,之前放入的... 本人新手,判断不同分辨率显示不同宽度布局实现自适应宽度!不要复制粘贴,我把代码放入后退出刷新一下,之前放入的代码全部消失,求解,有没有简单快速的办法?
怎么插入,之前放入的刷新一下就消失了 !
展开
 我来答
育知同创教育
2016-08-10 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
这个可以通过布局和样式解决:
方法一:所有布局用百分比布局,这种方法是比较传统的。

方法二:百分比和em(一个字符的单位)相结合的;

方法三:rem为单位来写样式,需要借助JS来根据分辨率的大小调整rem;

方法四:布局用rem单位,而字体用em.

第1、2两种方法是比较传统,网上随便搜搜就找得到了;第3种开始用到的rem,rem是css3新出的一种样式属性单位,类似PX;但是rem是可以人为设置大小的,也就是说rem这个单位的大小是可以设置,基于这个特性,再通过JS来根据分辨率控制这个rem的单位大小;
JS代码:

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 40 * (clientWidth / 1080) + 'px';
console.log(40 * (clientWidth / 1080))
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这边的40是rem的自己需要单位大小(自己根据需求设置的,如果需要甚至可以改成10);
这边的1080是设计效果图的大小,如果设计图是以宽度为2000的话,那么这边的1080就改成2000;

而em用来做字体单位的话,就可以根据不同的显示器(手机自身的设定)来显示字体,不会出现字体大的离谱,或者小的看不见的状况;
不过rem因为是CSS3的属性,在PC端的兼容性很差,不建议使用,但是移动端是非常适合的,总结就是PC端:方法一、方法二,移动端:方法三、方法四
追问
我插入代码   浏览器重启代码就消失掉。
杭州励贝电液科技有限公司
2023-08-23 广告
设计比例控制器需要以下步骤:1. 确定控制系统的要求,例如控制对象的特性、控制范围、精度等。2. 选择合适的传感器,能够准确测量控制对象的相关参数,例如位置、速度、压力等。3. 选择合适的执行器,能够产生足够的控制作用,例如电缸、电动推杆等... 点击进入详情页
本回答由杭州励贝电液科技有限公司提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式