PC端常用响应式布局总结(以后建门户类的直接看这篇) |
您所在的位置:网站首页 › 移动端样式适配的软件叫什么 › PC端常用响应式布局总结(以后建门户类的直接看这篇) |
固定宽度的样式
1.常见的固定宽度范围是1004px到1280px之间,再结合你的页面布局,如下例子中子盒子直接使用vw宽度进行布局 .container { width: 100%; max-width: 1600px; margin: 0 auto; } 媒体查询和响应式布局通过使用@media规则,我们可以根据不同的屏幕宽度为页面应用不同的样式。 @media (max-width: 768px) { /* 在宽度小于等于768px时应用的样式 */ .container { width: 100%; padding: 20px; } } @media (min-width: 769px) and (max-width: 1024px) { /* 在宽度在769px到1024px之间应用的样式 */ .container { width: 90%; margin: 0 auto; } } @media (min-width: 1025px) { /* 在宽度大于等于1025px时应用的样式 */ .container { width: 80%; margin: 0 auto; } } 使用rem单位和插件使用lib-flexible和postcss-plugin-px2rem插件。lib-flexible可以根据屏幕尺寸动态设置根元素的字体大小,而postcss-plugin-px2rem可以自动将像素单位转rem |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |