如何使MVC Web应用程序进行调整以自动适应不同的屏幕尺寸 [英] How to make an MVC web application adjust to automatically fit different screen sizes

问题描述

我的MVC Web应用程序非常适合台式机显示器，我尝试将其从17英寸增加到22英寸.但是，当将它加载到14或15"的笔记本电脑屏幕上时，某些字段被移出位置，使Web应用程序看起来不整洁.我用

My MVC web application fits perfectly onto desktop monitors, which I've tried from 17" up to 22". However when it was loaded onto a laptop screen, which was 14" or 15" some fields were pushed out of position making the web application untidy looking. I used

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

因为我认为这可以解决问题，但事实并非如此.有什么方法可以在笔记本电脑的屏幕上显示该应用程序?

as I thought this would solve the issue but it hasn't. Is there a way of being able to display the application on laptop screens?

推荐答案

您将不得不使用媒体查询来为较小的屏幕编辑CSS.这样，您可以根据屏幕尺寸设置某些CSS规则.示例:

You're going to have to edit the CSS for smaller screens using media queries. By doing this you can set certain CSS rules depending on the size of the screen. Example:

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

您可以在几个不同的屏幕尺寸上继续执行此操作.您还可以为屏幕尺寸范围设置样式.示例:

You can continue doing this for a few diferent screen sizes. you can also do styles for ranges of screen sizes. Example:

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

如果您正在使用MVC，则应在项目中安装Bootstrap.如果是这样，请看看如何使用Bootstrap的列布局，它是一个强大的工具，可用于创建在所有屏幕尺寸上都看起来不错的响应式网站.

If you are using MVC though you should have Bootstrap installed in the project. If so have a look at how to use Bootstrap's column layout, its a powerful tool for creating responsive websites that look great on all screen sizes.

这篇关于如何使MVC Web应用程序进行调整以自动适应不同的屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！