用于移动应用的Css [英] Css for mobile application

问题描述

在某些手机中我的css显示正常但在某些手机中字体大小变大了，有没有办法在css中解决这个问题。

In some mobile my css display properly but in some mobile the font size become bigger , Is there any way to fix this issue in css.

推荐答案

你可以使用css媒体屏幕查询您的应用程序。然后，您将能够针对不同的屏幕大小更改相同css类的实现。



例如：



HTML：

You can use css media screen query for your application. Then you will be able to change the implementation of same css class for different screen size.

Example:

HTML:

<div class="style1">
    Hi, this is a test.
    </div>

CSS：

CSS:

.style1
{
    border: 4px solid green;
    width:100%
}
@media screen and (max-width: 680px) {

	.style1
	{
	    border: 4px solid gray;
	}
}
@media screen and (max-width: 400px) {

	.style1
	{
	    border: 4px solid blue;
	}
}

在这里你看到第一个css类是一般的（媒体屏幕块之外） 。其他2个类别的媒体大小不同。你看我为每个媒体屏幕块提到了max-width。这意味着如果屏幕尺寸<= 400px，那么它将使用来自第一媒体屏幕块的css类，但是如果屏幕尺寸是> 400px和< = 680px然后它将使用来自第二媒体屏幕块的css类。

Here you see 1st css class is a general one (outside of media screen blocks). And other 2 classes are under different media size. you see I have mentioned "max-width" for each media screen block. That means if screen size is <=400px then it will use the css class from 1st media screen block, but if screen size is > 400px and <=680px then it will use the css class from 2nd media screen block.

这篇关于用于移动应用的Css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！