remi 자체 적응 레이아웃 의 회고 총화

remi 를 사용 하여 자가 적응 구 조 를 실현 하 는 것 은 현재 이동 전단 의 큰 추세 라 고 할 수 있 습 니 다. 어떤 사람들 은 이에 대해 약간 현혹 되 었 습 니 다. remi 가 어떻게 자가 적응 구 조 를 실현 하 는 지 모 르 겠 습 니 다. 디자인 원고 에 따라 remi 의 가 치 를 어떻게 조정 하 는 지 모 르 겠 습 니 다.remy 레이아웃 은 어떻게 사이다 배경 그림 을 사용 합 니까?remi JS 꼭 불 러 와 야 돼 요?remi 의 루트 html font - size 설정 은 얼마나 적당 합 니까?이 문장 을 보면 아마 너 를 도 울 수 있 을 것 이다.
이 문제 들 은 이전에 발표 한 글 을 정리 하고 세심 한 독자 도 이전의 내용 을 뒤 져 서 답 을 찾 을 수 있 습 니 다. 본 고 는 통일 적 으로 답 을 드 리 겠 습 니 다. 만약 당신 에 게 유용 하 다 면 칭찬 도 눌 러 주 십시오. 감사합니다!
remi 적응 원리
remi 는 html 의 font - size 크기 에 따라 변화 합 니 다. 바로 이 를 바탕 으로 출발 합 니 다. 우 리 는 모든 장치 에서 장치 의 너비 에 따라 html 번 호 를 설정 하여 적응 구 조 를 실현 할 수 있 습 니 다.더 많은 소 개 는 이 글 을 보십시오. remi 가 어떻게 자체 적응 구 조 를 실현 하 는 지.
remi 의 값
현재 두 가지 가 있 는데 하 나 는 js 에 따라 html 의 번 호 를 조정 하 는 것 이 고 다른 하 나 는 미디어 조 회 를 통 해 번 호 를 조정 하 는 것 이다.
js 사용

;(function(designWidth, maxWidth) {
	var doc = document,
		win = window;
	var docEl = doc.documentElement;
	var tid;
	var rootItem,rootStyle;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		if (!maxWidth) {
			maxWidth = 540;
		};
		if (width > maxWidth) {
			width = maxWidth;
		}
		//       ，       rem    1rem=100px
		var rem = width * 100 / designWidth;
		//  UC  
		rootStyle="html{font-size:"+rem+'px !important}';
		rootItem = document.getElementById('rootsize') || document.createElement("style");
		if(!document.getElementById('rootsize')){
		document.getElementsByTagName("head")[0].appendChild(rootItem);
		rootItem.id='rootsize';
		}
		if(rootItem.styleSheet){
		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
		}else{
		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
		}
		//  UC  
		docEl.style.fontSize = rem + "px";
	};
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //      
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { //             
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(640, 640);

위의 코드 를 html 헤드 에 삽입 할 수 있 습 니 다. 환산 비율 은 1rem = 100 px 입 니 다. 계산 이 편리 하기 위해 서 는 제 github 프로젝트 에서 완전한 구조 와 압축 된 js 를 다운로드 할 수 있 습 니 다.
프로젝트 홈 페이지
위 코드 의 핵심 코드 는:

var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";

4. 567917. 첫 번 째 줄 코드 는 모 바 일 장치 의 너비, 두 번 째 줄, remi 의 값 은 (장치 의 너비) x100 / (디자인 원고 너비) 와 같 고 세 번 째 줄 은 html 의 글자 번 호 를 두 번 째 줄 의 값 으로 설정 합 니 다
4. 567917. 어떤 사람들 은 두 번 째 줄 코드 와 타 오 바 오의 차이 점 을 알 수 있 습 니 다. 차이 점 은 바로 remi 의 환산 비율 입 니 다. 여기 서 실제 상황 으로 임의로 바 꿀 수 있 습 니 다. 예 를 들 어 누군가가 20px 를 즐겨 사용 하면 위의 100 을 20 으로 바 꿀 수 있 고 환산 비율 은 1rem = 20px 로 바 꿀 수 있 습 니 다.위의 코드 에 대해 서 는 이전 글 을 볼 수 있 습 니 다. Rem 간소화 판 은 자가 적응 을 실현 합 니 다
4. 567917. 타 오 바 오 로 돌아 가 는 것 도 있 습 니 다. 그러면 두 번 째 줄 코드 는 var remi = width / 10 으로 변 할 수 있 습 니 다.환산 비율 은 디자인 원고 의 너비 에 따라 조정 되 었 습 니 다. 우리 의 디자인 원고 너비 가 640 이 라 고 가정 하면 html 의 글꼴 크기 는 64px 로 설정 되 고 1remy = 64px 에 해당 합 니 다.구체 적 실현 은 이전 글 을 보십시오: remi 자체 적응 레이아웃 - flexible
미디어 검색 사용
결국 위의 js 코드 는 서로 다른 장치 에 따라 html 번 호 를 조정 하 는 것 이 아 닙 니까? 그러면 우 리 는 실제 장치 에 따라 해당 하 는 번 호 를 추가 하면 되 지 않 습 니까?
html 의 기본 글꼴 이 16px 라 는 것 을 알 고 있 습 니 다. 해당 하 는 장치 에 서 는 font - size 를 설정 하여 일치 하 는 크기 조정 비율 을 설정 할 수 있 습 니 다.

html {
font-size: 62.5%
}

@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}

@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}

@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}

body {
max-width: 640px
}
}

위의 코드 는 1rem = 20px 를 통 해 환산 한 것 인 데 어디서 알 수 있 습 니까?가장 큰 값 640 에서 출발 하여 만약 당신 의 디자인 원고 가 750 이 라면 더 많은 미디어 조 회 를 설계 하고 환산 비율 을 일치 시 키 면 됩 니 다.그럼 제 가 환산 비율 을 1rem = 100 으로 바 꾸 고 싶다 면 요?위의 규칙 에 따라 가장 큰 값 은 html: font - size: 100 / 16 * 100% 이 고 다른 것 은 비례, 예 를 들 어 480 px, 480 / 640 * (100 / 16 * 100%) 입 니 다.
사이다 그림 사용 하기
국내 에 서 는 글씨체 아이콘 을 사용 하거나 SVG 방식 으로 구현 하 는 것 을 선 호 하 는 사람 이 많 지만 작은 항목 에 서 는 다소 비 현실 적 이다.나 는 보통 아래 의 두 가지 방식 을 사용한다.
4. 567917. 첫 번 째 는 배경 그림 을 하나 로 자 른 다음 에 base 64 로 환산 하거나 sas 방식 으로 전환 하 는 것 이지 만 단점 은 스타일 파일 이 커지 고 개인 적 으로 평가 하 는 것 이다
4. 567917. 두 번 째 는 배경 그림 의 백분율 을 통 해 정확 한 포 지 셔 닝 을 하 는 것 이다. 상세 한 내용 은 이 글 을 참조 하 자. CSS 3 배경 그림 의 백분율 과 응용
4. 567917. 또는 정확도 가 높 지 않 으 므 로 remi 포 지 셔 닝 을 사용 해도 됩 니 다. 바로 인접 한 그림 을 분리 하 는 것 입 니 다
본문 뒤에 remi 의 자가 적응 에 관 한 문 제 를 계속 업데이트 할 것 입 니 다. 문제 가 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.
원문 링크: remi 자체 적응 레이아웃 의 회고 총 결 판권 소유, 전재 시 출처 를 밝 히 고 위반 자 는 반드시 추궁 해 야 합 니 다.
출처 형식: 전단 개발 블 로그 (http://caibaojian.com/rem-responsive-2.html)
다음으로 전송:https://www.cnblogs.com/doseoer/p/5621923.html