如何更改不同屏幕分辨率的主菜单项大小

本教程展示了如何根据不同的屏幕分辨率更改主菜单项的大小，以及如何将主菜单项保持在一行中.

如何更改不同屏幕分辨率的主菜单项大小

我们的模板旨在保持菜单项尽可能大，而不会将菜单分成两行. 这是很重要的 导航 良好的用户体验. 有时您需要添加比原始模板中更多的菜单项. 它可能导致菜单折叠成两行或多行. 解决出现问题的最简单方法是减少 字体大小 你的菜单项. 我们将向您展示如何在不同的窗口宽度下实现这一点:

为了改变菜单 字体大小，你应执行以下步骤:

1. 找到确切的CSS 选择器 它指定了 字体大小 属性设置菜单项. 它需要一个web检查工具(FireBug或Google web inspector). 您需要检查菜单项链接，并在代码中找到 字体大小 设置. It is usually set for an element. 还可以使用速记字体属性设置大小. 请看下面的例子:

   			.sf-menu > li > a {
   			字体:粗体19 px / 22 px;
   			}
   		

   在这里 19 px / 22 px 指定 字体大小/行高:

   

2. 现在你有了CSS 选择器 你可以自己写规则. 在此之前，我们建议您选择正确的 字体大小 通过更改web检查器工具中的属性值. 因为你选对了 字体大小 值将小到足以使您的菜单项保持在一行中，您可以组成一个规则. 例如:

   		.sf-menu > li > a {
   		字体大小:16 px !重要;
   		}
   	

   注意 !重要的 属性. 取决于模板 框架 在您要放置代码的文件中，您可能需要设置重要的规则 覆盖 默认值. 因此，尝试使用没有此属性的代码，如果它不起作用，只有然后使用 !重要的 属性.

3. 选择要放置代码的文件. 你可以把它放在你网站的任何CSS文件中, 但是这里有一份我们为您准备的每个引擎的推荐文件清单.

   CMS模板:

   • WordPress主题(WooCommerce/Jigoshop主题) / wp-content /主题/ themeXXXXX /风格.css
   • Joomla模板(VirtueMart模板) /模板/ themeXXXX / css /模板.css
   • Drupal主题 /网站/ /主题/ themeXXX / css /风格.css
   • Web (HTML5)模板 / css /风格.css

   电子商务模板:

   • 线上购物的主题 /皮/前端/违约/ themeXXX / css /风格.css
   • PrestaShop主题 /主题/ themeXXXX / css /全球.css
   • OpenCart模板 /目录/视图/主题/ themeXXX /样式表/样式表.css
   • ZenCart模板 / /模板/包括themeXXX / css /样式表.css
   • osCommerce模板 / css /样式表.css
   • Shopify主题 style.css.液体

4. 现在您需要指定 字体大小 的值 浏览器 窗口的宽度. 要做到这一点，请将代码放入@中媒体 查询。 对于每个宽度. 使用检查工具调整正确的字体大小. 在下面你会发现@媒体 为您准备的查询:

   	  
   			@媒体 only 屏幕 and (min-width: 768px) {
   			.sf-menu > li > a {
   			字体大小:11 px !重要;
   			}
   			}		  
   			@媒体 only 屏幕 and (min-width: 980px) {
   			.sf-menu > li > a {
   			字体大小:14像素 !重要;
   			}
   			}		  
   			@媒体 only 屏幕 and (min-width: 1280px) {
   			.sf-menu > li > a {
   			字体大小:16 px !重要;
   			}
   			}
   		

5. 保存CSS文件中的更改并将其上传到服务器. 你的最终结果应该是这样的:

   

请随时查看下面的详细视频教程:

如何更改不同屏幕分辨率的主菜单项大小