(共556篇)
全部分类

移动端页面的css尺寸自适应问题
[ CSS基础 ] 

假设 375 的设计稿里有个元素宽度为 100px 这个元素在 700 的屏幕中 宽度应该是 700*100/375px 但是在 css 里面 不可能去写这么一个算式, 只能借助 html 的 font-size 与 rem 相结合去实现

也就是说, 如果我给一个元素宽度设为 1rem, 我希望这个二元素在 375 的屏幕下表现为 100px, 在 700 的屏幕下表现为 200px 就需要 375 屏幕中 html 的 font-size 就应该是 100px, 700 屏幕中 html 的 font-size 就应当是 200px 才能实现这个目的

也就是说, 如果我想把 100px 宽的元素 , 用 1rem 来表示

1
2
deviceWidth       375     700     	414
html.font-size    100px   200px     ? = deviceWidth\*100/375

但是以上的前提是 designWidth 是以 375 来设计的, 假设 designWidth 是以 700px 设计的 如果我要给一个元素跨宽度设为 1rem, 并且希望这个元素在 700 的屏幕下表现为 100px, 在 375 的屏幕下表现为 50px

1
2
deviceWidth       700       375    	414
html.font-size    100px     50px      ? = deviceWidth\*100/700

综合这两个案例, 可以发现, 确定html.font-size值的公式中, 还存在一个变量,那就是设计稿的尺寸, 所以正式应写为: deviceWidth\*100/designWidth