使用Flexible实现H5页面的终端适配

最新推荐文章于 2025-09-10 11:07:46 发布

weixin_30687051

最新推荐文章于 2025-09-10 11:07:46 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/gengxinnihaoma/p/7383059.html

本文介绍使用iPhone6作为设计基准，详细说明了如何将视觉稿中的像素(px)转换为响应式单位(REM)，并提供了SCSS混合方法实现不同设备屏幕密度下的字体适配。

选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。著作权归作者所有。

把视觉稿中的px转换成rem

假如一个图片的大小：176px*176px 结果：176px/75px *1rem =2.346666rem

mixin.scss

@mixin font-dpr($fontSize){

font-size: $fontSize;

[data-dpr="2"] & {

font-size: $fontSize * 2;

}

[data-dpr="3"] & {

font-size: $fontSize * 3;

}

@mixin border-normal(){

border: 1px solid $borderColor;

}

@mixin border-radius(){

border-radius: 15rem/$base;

}

------------------------------------------------------------------------------------------------------

var.scss

$fontStack:"PingFang SC","Helvetica","思源黑体","Noto SansCJK","Rotobo",sans-serif;

$base:75;

$commonBackground:#eceff4;

// 字体

// 默认

$fontColor:#333;

// 禁用

$fontDisabled:#666;

// 背景颜色

$primaryColor:#07c4ac;

// 边框颜色

$borderColor:#ccc;

$successColor: #07c4ac;

$disabledColor: #dedfe1;

$grayColor: #999;

$whiteColor: #fff;

$dangerColor:#ff4949;

$tipColor:#747474;

$orange:#ffa900;

$blueColor: #337ab7;

----------------------------------------------------------------------

style.scss

.cf:before,

.cf:after {

content: " ";

display: table;

}

.cf:after {

clear: both;

}

.fl {

float: left;

}

.fr {

float: right;

}

@import './var.scss';

@import './mixin.scss';

// reset

* {

box-sizing: border-box;

margin: 0;

padding: 0;

@include font-dpr(14px);

}

html,

body {

margin: 0;

padding: 0;

background-color: $commonBackground;

-webkit-overflow-scrolling: touch;

-webkit-tap-highlight-color: transparent;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

line-height: 1.6;

font-family: $fontStack;

color: $fontColor;

word-break: break-all;

box-sizing: border-box;

@include font-dpr(14px);

// width: 100%;

// overflow-x: hidden;

}

html {

min-height: 100%;

}

::-webkit-input-placeholder {

/* WebKit browsers */

color: $fontDisabled;

}

:-moz-placeholder {

/* Mozilla Firefox 4 to 18 */

color: $fontDisabled;

}

::-moz-placeholder {

/* Mozilla Firefox 19+ */

color: $fontDisabled;

}

:-ms-input-placeholder {

/* Internet Explorer 10+ */

color: $fontDisabled;

}

转载于:https://www.cnblogs.com/gengxinnihaoma/p/7383059.html