如何调整MVC Web应用程序以自动适应不同的屏幕大小

Question

我的MVC网络应用程序非常适合桌面显示器，我已经尝试过17＆＃34;最多22＆＃34;。然而，当它被加载到笔记本电脑的屏幕上，这是14＆＃34;或15＆＃34;一些字段被推出位置使得Web应用程序看起来不整洁。我用了

<meta http-equiv="x-ua-compatible" content="IE=Edge">

因为我认为这可以解决问题，但它没有。有没有办法在笔记本电脑屏幕上显示应用程序？

Answer 1

您将不得不使用媒体查询编辑较小屏幕的CSS。通过这样做，您可以根据屏幕的大小设置某些CSS规则。例如：

//for a mobile sized screen
@media screen and (max-width: 300px) {
    //CSS for all screens under 300px
}

您可以针对几种不同的屏幕尺寸继续这样做。您还可以为屏幕尺寸范围设置样式。例如：

@media (min-width: 301px ) and (max-width 700px) {
    //CSS for all screen sizes between 301px and 700px
}

如果你正在使用MVC，你应该在项目中安装Bootstrap。如果是这样的话，看看如何使用Bootstrap的列布局，它是一个功能强大的工具，用于创建在所有屏幕尺寸上都很棒的响应式网站。