首页前端页面屏幕适配语句

前端页面屏幕适配语句

时间: 2023-11-01 14:58:21 浏览: 45

前端页面屏幕适配可以使用rem单位和媒体查询来实现。首先，可以设置1rem单位为屏幕宽度的10分之一，即设置1rem = viewWidth / 10。然后，根据不同的屏幕尺寸设置对应的1rem值。这样，在页面中使用rem单位来表示元素的大小，就可以实现元素大小的动态变化适应不同的屏幕大小。以下是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top { height: 1rem; line-height: 1rem; text-align: center; font-size: .5rem; background-color: green; color: #FFF; } @media screen and (min-width: 320px) { html { font-size: 50px; } } @media screen and (min-width: 640px) { html { font-size: 100px; } } </style> </head> <body> <div class="top">购物车</div> </body> </html> ``` 在上述示例中，使用了媒体查询来设置不同屏幕尺寸下的html的font-size值，从而实现元素大小的自适应变化。