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

你可以从这个tutorial学到, 如何调整主菜单项的大小以适应不同的屏幕分辨率，以及如何将主菜单保存为一行.

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

Наши щаблоны сделаны так, 他们保留了如此广泛的菜单, 尽可能不让菜单移动到下一行. 这对于方便的网站导航和更好的用户与网站的互动体验很重要. 有时您需要添加比模板中最初包含的更多的菜单项. 这样做的结果可能是菜单的一部分将下降到下一行. 解决这个问题最简单的方法就是 размера шрифта (font-size) элементов меню. 我们将向您展示如何为不同的屏幕分辨率将菜单保存在一行中:

Для того, чтобы изменить размер шрифта (字体大小)，您需要做以下操作:

1. 找到指定属性的CSS选择器 размер шрифта (字体大小)菜单项. 为此，您需要一个开发人员工具(FireBug或谷歌Web Inspector)。. 你需要检查菜单链接，并在代码中找到它的位置 размер шрифта. Как правило он задан для элемента . 字体大小也可以在简化字体属性中设置. 注意以下示例:

   			.sf-menu > li > a {
   			字体:大胆19px/22px Open Sans;
   			}
   		

   где 19px/22px указывает размер шрифта/высоту строки:

   

2. 现在你有了CSS选择器，你可以创建你自己的规则. 在你这样做之前，选择一个合适的 размер шрифта (font-size)，改变开发工具中的属性值. 一旦你选择了合适的 размер шрифта (font-size), 它将足够小，, 让你的菜单显示在一行, Вы можете создать правило. Например:

   		.sf-menu > li > a {
   		font-size: 16px !important;
   		}
   	

   密切关注属性 !important. 根据网站的引擎和你要添加代码的文件, 我们可能需要确定一条规则, 使其优先于默认值. 尝试使用没有此属性的规则. 如果规则不起作用，则仅在这种情况下使用该属性 !important.

3. 选择要添加代码的文件. 你可以把它添加到你的网站的任何CSS文件, но эсть файлы, 我们建议添加CSS规则. 我们已经为不同的引擎准备了这样的文件列表:

   Шаблоны CMS:

   • WordPress主题(WooCommerce主题/Jigoshop) 内容/ themes themeXXXXX / wp / style.css
   • Joomla模板(VirtueMart模板 / templates themeXXXX / css / template.css
   • Шаблоны Drupal 文化部/ all / themes themeXXX / css style.css
   • Веб шаблоны (HTML5) /css/style.css

   Шаблоны Интернет-магазинов:

   • Темы Magento /skin/frontend默认themeXXX / css / styles。.css
   • Темы PrestaShop /themes/themeXXXX/css/global.css
   • Шаблоны OpenCart /目录/ view / theme themeXXXstylesheet/stylesheet.css
   • Шаблоны ZenCart includes / templates themeXXX / css /stylesheet.css
   • Шаблоны osCommerce /css/stylesheet.css
   • Темы Shopify style.css.liquid

4. 现在你需要指定一个值 размера шрифта (字体大小)对于每个特定的屏幕值. 为此，请插入查询代码@media для каждого размера экрана. 使用开发人员工具选择合适的字体大小. 下面你可以找到一个请求列表@media, подготовленный для Вас:

   	  
   			@media仅屏幕和(最小宽度:768px) {
   			.sf-menu > li > a {
   			font-size: 11px !important;
   			}
   			}		  
   			@media仅屏幕和(最小宽度:980px) {
   			.sf-menu > li > a {
   			font-size: 14px !important;
   			}
   			}		  
   			@media仅屏幕和(最小宽度:1280px) {
   			.sf-menu > li > a {
   			font-size: 16px !important;
   			}
   			}
   		

5. 保存对CSS文件的更改并将文件上传到服务器. 因此，您将得到以下内容:

   

你也可以在下面观看详细的视频:

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