Question

我正在管理一个新网站，我遇到了fontsizes的问题。在桌面版本上，它看起来很好，但在移动设备上，文字很大。

    [HttpPost]
    [Route("api/uploadImage")]
    [ResponseType(typeof(List<BlobUploadModel>))]
    public async Task<IHttpActionResult> PostBlobUpload()
    {
        try
        {
            // This endpoint only supports multipart form data
            if (!Request.Content.IsMimeMultipartContent("form-data"))
            {
                return StatusCode(HttpStatusCode.UnsupportedMediaType);
            }

            //Added this code to convert to Byte and check if it is a image
            Byte[] byteArray = await Request.Content.ReadAsByteArrayAsync();
            bool isvalidImage = IsValidImage(byteArray);

            if (isvalidImage == false)
            {
                return BadRequest();
            }


            // Call service to perform upload, then check result to return as content
            var result = await _service.UploadBlobs(Request.Content);
            if (result != null && result.Count > 0)
            {
                return Ok(result);
            }

            // Otherwise
            return BadRequest();
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }



    //Method that is being called to validate if image
     public static bool IsValidImage(byte[] bytes)
    {
        try
        {
            using (MemoryStream ms = new MemoryStream(bytes))
                Image.FromStream(ms);
        }
        catch (ArgumentException)
        {
            return false;
        }
        return true;
    }

如何控制移动设备上的字体？我可以以某种方式添加如下内容：

.blog {

        h2 {
            a {
                font-size:inherit;
                font-weight:inherit;
                color:inherit;
            }
        }

或者这是错误的做法吗？

使用此解决方案，代码看起来像？：

@media screen and (max-width: 768px){

        .h1, h1 {
            font-size: 1.5em;
        }
        .h2, h2 {
        font-size: 26px;
        }

Answer 1

这是一种正确的使用方法。

但是这里有一些提示：

首先使用px over em

因为em和ex的解释取决于操作系统。无论您使用什么操作系统，px都会显示相同的大小。

您可以使用相对值：％

％将使字体大小与其父字体大小成比例。这对于响应式设计非常有用，因此您只需要更改一个字体大小，即父级。

您可以使用this link了解有关使用哪个单元及其原因的更多信息。

编辑：

您的代码需要进行一些更正：您的CSS错过了一些}，因此我修复了它并且能够使您的代码正常工作。

.blog {

    h2 {
        a {
            font-size:inherit;
            font-weight:inherit;
            color:inherit;
            }
        }


    @media screen and (max-width: 768px){

    .h1, h1 {
        font-size: 16px;
        }
    .h2, h2 {
        font-size: 12px;
        }
    }
}

JSFiddle here

字体大小继承移动设备上的控件

1 个答案: