Open keisukeFukumitsu opened 6 years ago
レスポンシブ化でCSSファイル整理しようかなと、
使ってないクラスが多い、10%程度しか使われていない2つ
Common.css
Normalize.css
この2つ外して、崩れたのは↑2つからクラスを下ファイル持ってくる感じ
Responsive.css
2017
以下の画面幅5段階で強制的に変化してしまう 768px以上はおなじになるようクラスを上書き調整
Mobile 0-767px
Tablet 768-991px
Computer 992-1199px
Large Monitor 1200-1919px
Widescreen over 1920px
http://rcart.eek.jp/used1r/pc.html あらかたレスポンシブ済
残:調整!! plz plz @keisukeFukumitsu
800pxあたりでカートのパーツがあやしい形
http://learnsemantic.com/developing/customizing.html#setting-global-variables
gulp build
src/themes/default/globals/site.variables
@mobileBreakpoint : 320px;
@tabletBreakpoint : 992px; /** koko **/
@computerBreakpoint : 992px; /** koko **/
@largeMonitorBreakpoint : 1200px;
@widescreenMonitorBreakpoint : 1920px;
https://github.com/tohshige/test/blob/master/used1r/pugorg/index.pug#L115L120 Pugなら1商品こんな感じ。_mixins.pug から呼び出してる @keisukeFukumitsu @fukumitsu
var breakPoint = 750; //ブレイクポイントは一箇所で
var isSp = function(){
if (!window.innerWidth){
return false;
}
// IE9以下 or メディアクエリメソッドが使えない場合はinnerWidthで判定
if(!window.matchMedia){
return (window.innerWidth <= breakPoint) ? true : false;
}
// メディアクエリメソッドで判定
if(window.matchMedia('(max-width:'+breakPoint+'px)').matches){
return true;
} else {
return false;
}
}
if(isSp){ //SPなら書き換え
$("meta[name='viewport']").attr('content', 'width=375');
}
Header,Metaの viewport content 'width=1024 を画面幅で書き換える
var breakPoint = 750; //ブレイクポイントは一箇所で
var isSp = function(){
if (!window.innerWidth){
return false;
}
// IE9以下 or メディアクエリメソッドが使えない場合はinnerWidthで判定
if(!window.matchMedia){
return (window.innerWidth <= breakPoint) ? true : false;
}
// メディアクエリメソッドで判定
if(window.matchMedia('(max-width:'+breakPoint+'px)').matches){
return true;
} else {
return false;
}
}
if(isSp){ //SPなら書き換え
$("meta[name='viewport']").attr('content', 'width=375');
}
縦幅の短いPCディスプレイで見た時に、 商品のサムネイル部分が切れて見えないので、 全体的にレイアウト・サイズ調整