前端开发基本专业知识简述 -- 手机端开发设计的显示屏、图象、字体样式与合理布局的适配兼容 前端开发基本专业知识简述 -- 手机端开发设计的显示屏、图象、字体样式与合理布局的适配兼容

前端开发开发设计

04/10 08:15

ChokCoco

-- Web

RWD Responsive Web Design

https:///question/20976405

Content is like water

PC Mac VR

;

APP

/

/

dp( rem)

Media queries break point Flexibel visuals (Fluid grids) (Main content and high quality)

vs.

Responsive Web Design RWD Adaptive Web Design AWD

RWD AWD RWD AWD

RWD Ethan Marcote RWD RWD HTML CSS RWD Jeffrey Zeldman RWD

AWD Adaptive Design Aaron Gustafson AWD RWD CSS Java HTML AWD AWD

RWD AWD

vs.

progressive enhancement graceful degradation

/ AWD

CSS3 CSS

CSS3 PC IE678 IE9+ chrome firefox IE

iPhone6/7/8 Chrome

375 * 667 DIP CSS

= CSS =

CSS 375px div 667px div

OK JD iPhone7

iPhone7 1334 x 750

1334 x 750 pt

=

DPR Device Pixel Ratio

OK DPR Device Pixel Ratio Retina

DPR = /

iPhone7

iPhone7 s DPR = iPhone7 s / iPhone7 s = 2

750 / 375 = 2

1334 / 667 = 2

iPhone7 dpr 2

Retina dpr 1

dpr = 2 4(2x2) 1

OK iPhone XS Max

2688 x 1242

CSS 896 x 414 iPhone XS Max dpr 3

CSS DPR PPI DPI

OK H5

CSS dpr

CSS CSS CSS 100%

375*667

209/375 = 55.73% 80/375 = 21.33% ...

CSS 320px 375px 414px

CSS CSS Values and Units Module Level 4

width maring/padding height border border-radius font-size font-size box-shadow text-shadow

rem

vw rem rem

rem font size of the root element CSS Values and Units Module Level 3 em font size of the element em rem html

flexible

rem lib-flexible

dpr viewport data-dpr data-dpr document.documentElement.clientWidth font-size rem

lib-flexible Viewport rem

hotcss

hotcss hotcss flexible

rem

flexible/hotcss

Viewport Viewport innerWidth/innerHeight

flexible rem Viewport 1px

flexible/hotcss CSS Java rem rem hack 4.4 viewport flexible Android dpr 1 viewport

vw

rem hack rem

vw

rem Java font-size vw/vh vmax/vmin rem JS

CSS Values and Units Module Level 4 vw html 1%

1vw window.innerWidth 1%1vh window.innerHeight 1%

209/375 = 55.73% = 55.73vw 80/375 = 21.33% = 21.33vw ...

vw

vw vw 1px vw vw

CodePen Demo vw

rem Sass/Less

// 375px 1rem = 100px

$baseFontSize: 100;

@ functionpx2rem($px){

@ return$px / $baseFontSize * 1rem;

}

vw

// 375px

@ functionpx2rem($px){

@ return$px / 375* 100vw;

}

postcss-px-to-viewport

vw polyfill

vw

CSS Houdini CSS Houdini vw CSS Typed OM Level1 CSSUnitValue API CSS Polyfill Polyfill vw Polyfill vminpoly Viewport Units Buggyfill vunits.js Modernizr

vw

vw

1px vw rem Java rem vw

H5 Responsive And Fluid Typography With vh And vw Units VH VW

1px

vw Retina 1px

retina border: 1px 1 1 CSS CSS

dpr = 1 1 1 CSS dpr = 2 1 0.5 CSS border-width: 1px 1px 1 CSS 2 border-width: 0.5px ; dpr = 3 1 0.33 CSS border: 0.333px

border-width: 0.5px iOS7 Android 1px 0px 0.5px 0.33px

base64 SVG background url

Retina 1px

CSS3SVG DPR

dpr

CSS3SVG CSS3

CSS 300 x 200 dpr = 3 dpr = 3 900 x 600

dpr 3 3 dpr = 1 dpr = 2

dpr

srcset 1x 2x

srcset dpr

>

imgsrc= illustration-small.png

srcset= images/illustration-small.png 1x,

images/illustration-big.png 2x

>

div

srcset 1x 2x

dpr = 1 images/illustration-small.png dpr = 2 images/illustration-big.png srcset sizes w

1x 2x

srcset w sizes

img

sizes= (min-width:600px) 600px, 300px

src= photo.png

srcset= .png300w,

photo@ 2x.png600w,

photo@ 3x.png1200w,

sizes = (min-width: 600px) 600px, 300px CSS 600px CSS 600px CSS 300px

sizes CSS 600px 300px CSS

sizes CSS 600px 600px CSS JS

srcset = .png 300w, .png 600w, .png 1200w 300w 600w 900w

1. dpr = 2 CSS 375px

CSS 375px CSS 300px 3 300

300 / 300 = 1 600 / 300 = 2 1200 / 300 = 4

1 2 4 x 600w 2 dpr = 2

2. dpr = 3 CSS 414px

CSS 414px CSS 300px

300 / 300 = 1 600 / 300 = 2 1200 / 300 = 4

dpr = 3 2 1200w

3. dpr = 1 CSS 1920px

CSS 1920px CSS 600px

300 / 600 = .5 600 / 600 = 1 1200 / 600 = 2

dpr = 1 600w

Demo CodePen Demo -- srcset w sizes

PC

Google Web Fundamentals -- Web Responsive Images srcset sizes w

Windows Windows Phone Mac OS X iPhone Android Phone Linux Linux

CSS-Trick font-family

{

font-family:

system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,

Helvetica,Arial,

sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;

} font-family

CSS font-family

font-family: Arial Arial ; font-family: sans-serif

sans-serif Open Sans , Arial

CSS Fonts Module Level 3 -- Basic Font Properties 5

serif sans-serif monospace cursive fantasy

San Francisco Fonts

San Francisco Fonts iOS 9 WatchOS Apple Watch Apple TV tvOS

San Francisco Fonts iOS Helvetica Neue Apple

-apple-system/BlinkMacSystemFont

system-ui Chrome Safari Mozilla Windows

system-ui Can i Use -- system-ui( 2019-08-13)

Supported as the -apple-system value (only on macOS and iOS) Supported as the BlinkMacSystemFont value (only on macOS)

macOS iOS -apple-system BlinkMacSystemFont system-ui

Segoe UI

Segoe UI Windows Vista

font-family: Segoe UI Windows Windows Phone

Roboto

Roboto Android Google

Thin Light Regular Medium Bold Black

CSS-Tricks font-family

{

font-family:

system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,

Helvetica,Arial,

sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;

}

system-ui -apple-system Mac OS X iOS Neue Helvetica Lucida Grande San Francisco Fonts BlinkMacSystemFont Mac OS X Chrome segoe ui Windows Windows Phone Roboto Android Chrome OS Helvetica,Arial sans-serif

5 5

iOS MAC OS X Android Windows Windows Phone

/

font-family font-family PingFang SC ,miui,.. fallback

-- font-family Web font-family Using UI System Fonts In Web Design: A Quick Practical Guide System Fonts in CSS Apple s San Francisco Font

前端开发基本专业知识简述

前端开发开发设计基本技术专业专业知识概述 -- 手机上端开发设计设计方案的显示信息屏、图像、字体样式款式与有效合理布局的兼容适配 前端开发开发设计基本技术专业专业知识概述


预约挂号



扫描二维码分享到微信