css webapp手机屏幕适配字体大小

以下这段代码作用是，设置屏幕最大宽度640px，水平居中，以及不同屏幕下字体大小。可以将此放进common.css中使用：

@media only screen and (min-width: 640px) {html {font-size: 32px;background: #8cbc8b; }body {width: 640px;margin: 0 auto; }}
@media only screen and (min-width: 620px) and (max-width: 640px) {html {font-size: 32px; } }
@media only screen and (min-width: 600px) and (max-width: 620px) {html {font-size: 31px; } }
@media only screen and (min-width: 580px) and (max-width: 600px) {html {font-size: 30px; } }
@media only screen and (min-width: 560px) and (max-width: 580px) {html {font-size: 29px; } }
@media only screen and (min-width: 540px) and (max-width: 560px) {html {font-size: 28px; } }
@media only screen and (min-width: 520px) and (max-width: 540px) {html {font-size: 27px; } }
@media only screen and (min-width: 500px) and (max-width: 520px) {html {font-size: 26px; } }
@media only screen and (min-width: 480px) and (max-width: 500px) {html {font-size: 25px; } }
@media only screen and (min-width: 460px) and (max-width: 480px) {html {font-size: 24px; } }
@media only screen and (min-width: 440px) and (max-width: 460px) {html {font-size: 23px; } }
@media only screen and (min-width: 430px) and (max-width: 440px) {html {font-size: 22px; } }
@media only screen and (min-width: 420px) and (max-width: 430px) {html {font-size: 21.5px; } }
@media only screen and (min-width: 410px) and (max-width: 420px) {html {font-size: 21px; } }
@media only screen and (min-width: 400px) and (max-width: 410px) {html {font-size: 20.5px; } }
@media only screen and (min-width: 380px) and (max-width: 400px) {html {font-size: 20px; } }
@media only screen and (min-width: 360px) and (max-width: 380px) {html {font-size: 19px; } }
@media only screen and (min-width: 340px) and (max-width: 360px) {html {font-size: 18px; } }
@media only screen and (min-width: 320px) and (max-width: 340px) {html {font-size: 17px; } }
@media only screen and (min-width: 300px) and (max-width: 320px) {html {font-size: 16px; } }
@media only screen and (max-width: 300px) {html {font-size: 15px; } }

CSS3 @media 查询

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {body {background-color:lightblue;}
}

css webapp手机屏幕适配字体大小相关推荐

flutter 屏幕适配字体大小适配
前言: 现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到 ...
Android开发——Android手机屏幕适配方案总结
0. 前言 Android的屏幕适配,即使得某一元素在Android不同尺寸.不同分辨率的手机上具备相同的显示效果,这个问题一直以来都是我们Android开发者不得不面对的问题.本文参考了很多前人的博 ...
html在小的电脑屏幕字体缩小,如何把电脑字体调小?教你怎么调整电脑屏幕的字体大小...
现在,电脑对大家是越来越重要了,为什么会有这样的说法呢?因为不论是在生活.还是工作中,我们都离不开对电脑的使用.要是不经常使用那还行,可要是长时间在电脑前进行办公的话,那么大家都会希望在用的过程中,字 ...
flutter 屏幕尺寸适配字体大小适配，android面试常用算法
width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), ), 适配字体: ScreenUtil().setSp( ...
native字体尺寸自适应 react_react-native中屏幕以及字体大小适配
import { Platform, Dimensions, PixelRatio } from 'react-native'; // iPhoneX const X_WIDTH = 375; con ...
h5 手机屏幕适配—REM
一.rem.em和px之间的关系使用rem之前,先得弄清楚rem.em和px之间的关系,特别是每一个单位的使用跟代码块的继承之间的关系: 单位代码地址运行后截图说明 px https: ...
Android手机屏幕适配
Android机型尺寸各种各样,于是屏幕适配就成了Android开发中很重要的一环.Android屏幕适配可能一些开发者都会遇到这样的问题,今天就来分享下屏幕适配,其实Android屏幕适配也可以很简 ...
android手机屏幕适配理论知识
对于具有相同像素密度的设备来说,像素越高,尺寸就越大,所以可以换个思路,讲问题从单纯的尺寸大小转换到像素大小和像素密度的角度来占比最高的是480*800,320*480的设备竟然也占据了很大比例,但 ...
Android屏幕适配字体适配
首先来看一下他们的基本概念: px :是屏幕的像素点 dp :一个基于density的抽象单位,如果一个160dpi的屏幕,1dp=1px dip :等同于dp sp :同dp相似,但还 ...

css webapp手机屏幕适配字体大小

CSS3 @media 查询

css webapp手机屏幕适配字体大小相关推荐

最新文章

热门文章