[分享]css同时适配电脑和手机

随着移动设备的普及，我们需要确保网站的内容可以同时适配于电脑和手机端。而CSS是实现这种响应式设计的重要工具。在本文中，我们将介绍一些CSS技巧，帮助你同时适配于不同的设备。/ 设置常规样式 /bod...

随着移动设备的普及，我们需要确保网站的内容可以同时适配于电脑和手机端。而CSS是实现这种响应式设计的重要工具。在本文中，我们将介绍一些CSS技巧，帮助你同时适配于不同的设备。

/* 设置常规样式 */body { font-family: Arial, sans-serif; color: #333333;}/* 屏幕尺寸小于768px时使用的样式 */@media screen and (max-width: 767px) { /* 调整字体大小 */ body { font-size: 16px; } /* 缩小页面中的元素宽度 */ .container, .header, .menu, .content, .footer { width: 100%; margin: 0; padding: 0; } /* 隐藏部分元素 */ .hide-on-mobile { display: none; } /* 改变某个元素的位置 */ .hero-image { top: 0; left: 0; right: 0; bottom: auto; }}/* 屏幕尺寸大于等于768px时使用的样式 */@media screen and (min-width: 768px) { /* 调整字体大小 */ body { font-size: 18px; } /* 恢复页面中元素的宽度 */ .container { width: 960px; margin: 0 auto; } /* 显示部分元素 */ .hide-on-desktop { display: none; } /* 显示菜单 */ .menu { float: right; } /* 调整某个元素的位置 */ .hero-image { top: 0; left: auto; right: 0; bottom: 0; }}

上述代码展示了如何使用CSS适配不同的设备。通过media query，我们可以设置不同的样式规则，当页面在不同的设备上打开时会自动适配。其中，我们可以设置不同的字体大小、元素宽度、元素位置等样式。

需要注意的是，当页面的宽度大于等于768px时，我们将展示桌面端的样式规则。在桌面端，我们通常会显示更多的内容，并使用较大的字体和元素尺寸。而在移动设备上，页面的宽度较小，我们需要适当缩小元素的宽度，以便让页面内容可以完整的展示在屏幕上。

总之，CSS是实现响应式设计的强大工具。如果你按照上述方法设置了CSS样式，你的网站内容将会以最佳的形式出现在各种设备上。