前端开发 手机端页面自适应问题

不同的手机屏幕大小不一样,单用px是不合理的,于是有了rem,下面是less文件,计算rem:
designPageWidth 指代屏幕宽度,pageWidthVSfontSize指代当前屏幕下1rem表示多少px,拿到设计稿,可以根据设计稿来确定这2个值,
媒体查询的大小也可以根据需要进行修改,下面的仅供参考

css 代码

body {
font-size:10px;
}
@media screen and (min-width: 319px) {
body{
font-size:12px;
}
}
@media screen and (min-width: 359px) {
html,
body{
font-size:13px;
}
}
@media screen and (min-width: 374px) {
html,
body{
font-size:14px;
}
}
@media screen and (min-width: 410px) {
html,
body{
font-size:15px;
}
}
@media screen and (min-width: 434px) {
html,
body{
font-size:16px;
}
}
@media screen and (min-width: 559px) {
html,
body{
font-size:21px;
}
}
@media screen and (min-width: 613px) {
html,
body{
font-size:23px;
}
}
@media screen and (min-width: 639px) {
html,
body{
font-size:24px;
}
}
@media screen and (min-width: 719px) {
html,
body{
font-size:27px;
}
}
@media screen and (min-width: 739px) {
html,
body{
font-size:28px;
}
}
@media screen and (min-width: 767px) {
html,
body{
font-size:29px;
}
}
@media screen and (min-width: 819px) {
html,
body{
font-size:31px;
}
}
@media screen and (min-width: 939px) {
html,
body{
font-size:33px;
}
}
@media screen and (min-width: 959px) {
html,
body{
font-size:36px;
}
}
@media screen and (min-width: 979px) {
html,
body{
font-size:38px;
}
}
@media screen and (min-width: 1079px) {
html,
body{
font-size:40px;
}
}
@media screen and (min-width: 1241px) {
html,
body{
font-size:46px;
}
}
$designPageWidth: 375;
$pageWidthVSfontSize: 14;
@function trans($px) {
@return ( $px / $pageWidthVSfontSize) * 1rem;
}
» 本文来自:前端开发者 » 《前端开发 手机端页面自适应问题》
» 本文链接地址:https://www.rokub.com/3495.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!