PCサムネイル箇所修正、レスポンシブ

keisukeFukumitsu commented 6 years ago

縦幅の短いPCディスプレイで見た時に、商品のサムネイル部分が切れて見えないので、全体的にレイアウト・サイズ調整

tohshige commented 6 years ago

semantic ui (くせがある)とPugなんで途中まで組み立ては自分やります
なぞのJSエラーもデバック @keisukeFukumitsu sp <> pc . css class = .spNone or .pcNone でフレームけしたり、

tohshige commented 6 years ago

レスポンシブ化でCSSファイル整理しようかなと、使ってないクラスが多い、10%程度しか使われていない2つ Common.css Normalize.css この2つ外して、崩れたのは↑2つからクラスを下ファイル持ってくる感じ Responsive.css

tohshige commented 6 years ago

途中 https://slack-files.com/T04CFUZ8L-F7TREFQBW-894c286eb4

tohshige commented 6 years ago

2017

tohshige commented 6 years ago

semantic ui breakpoint

以下の画面幅5段階で強制的に変化してしまう 768px以上はおなじになるようクラスを上書き調整

Mobile 0-767px
Tablet 768-991px
Computer 992-1199px
Large Monitor 1200-1919px
Widescreen over 1920px

tohshige commented 6 years ago

調整用:横幅メーター

tohshige commented 6 years ago

http://rcart.eek.jp/used1r/pc.html あらかたレスポンシブ済

残:調整!! plz plz　@keisukeFukumitsu 800pxあたりでカートのパーツがあやしい形

tohshige commented 6 years ago

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;

tohshige commented 6 years ago

https://github.com/tohshige/test/blob/master/used1r/pugorg/index.pug#L115L120 Pugなら1商品こんな感じ。_mixins.pug から呼び出してる @keisukeFukumitsu @fukumitsu

tohshige commented 6 years ago

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');
}

tohshige commented 6 years ago

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');
}

tohshige / test