移动端自适应布局

作者: 写写而已 | 来源:发表于2020-03-12 17:46 被阅读0次

html {
    font-size: 26.67px
}

@media screen and (max-width: 1000px) {
    html {
        font-size:2.6667vw
    }
}
p {
    font-size: 1.2rem;
}

当屏幕宽度超过1000px时，计算后显示26.67px
当font-size采用rem时，在6p（375px）下，计算后显示为x10px，比如这里的p标签1.2rem，计算后是12px

max-width是1000，font-size就要是26.67，这个大小是适应1000的结果，如果想要其他max-width，那么html的font-size就要同步修改

max-width	html的font-size
1000px	26.67px
640px	26.67*640/1000 = 17.14px

这样到了最大值时就能平滑过渡，不会出现页面抖动，采用这个比例时，我们在写rem也好写

web自适应
简单事情简单做-宽度自适应所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界...
可伸缩布局flexible
gitHub地址： GitHub - amfe/lib-flexible: 可伸缩布局方案移动端自适应方案，相关...
css-进阶-css开发技巧-Layout Skill：布局技巧
Layout Skill 使用vw定制rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的...
移动端
移动端开发和 PC 端开发有哪些区别移动端考虑手机兼容性使用触屏事件布局自适应rem 动画处理CSS3 移...
移动端自适应布局
当屏幕宽度超过1000px时，计算后显示26.67px当font-size采用rem时，在6p（375px）下，计...
利用flex实现垂直水平居中
Flex布局简述 flex布局可以更加方便的适配移动端,做到快速灵活弹性化的自适应。实现方式效果图
HTML学习之图片字体适配
移动h5 图片字体等适配WebApp开发之--"rem"单位Rem实现自适应初体验手机端页面自适应解决方案—rem布局
流式布局
pc端可以通过设置版心来,完成不同屏幕的适配？移动端一般采用流式布局(百分比布局) 1. 高度定死,宽度自适应 ...
前端技能
css (flex布局移动端自适应适配 css3动画 css预处理器less/sass) js (re...
Bootstrap 的日常使用
十二栅格：盒子的移动（不影响自适应布局）：元素的大小设置(不影响自适应布局)：