HTML/CSSでどの端末でも同じように表記させたい

前提・実現したいこと

どの端末でもPC用のwebサイトがその端末に合わせた大きさになるものを作りたいです。ただレスポンシブみたいなものではなく、PC向けに作ったサイトをスマホやタブレットでそのまま表示したいのです。

最近、HTML/CSS/JSの勉強を始めた初心者なのですが、今の自分の知識でとりあえずwebサイトを作ってみようと思い、ローカルで作り始めてみました。本を見ながらネットで調べながらと、ようやくそれっぽい形のものが作ることができました。この作ったサイトはとりあえずレスポンシブを使用せず、どの端末でも同じように表記されるように作ってみました。

発生している問題

現在わたしはノートPCとデスクトップの二つで作業を行っており、ノートPCをメインに作業をしております。
しかし、このノートPCで出来上がったものをデスクトップでも作業を行おうと確認してみるとリストや画像の位置がずれていたりとガタガタな状況になっていました。

とりあえず
<meta name="viewport" content="width=960">
を使って作っていたのですが、これが問題なのでしょうか。
現在は画面幅(1366x768)いっぱいに合わせて作成していたのですが、もしかしてこの表記だと幅960pxに合わせてサイトを作ればどの端末でも同じ表記になるのでしょうか。
最初はこの表記なしで行ったり、
<meta name="viewport" content="width=device-width">
を使ってみたりしましたが上手くいきませんでした。
現状、ヘッダーとフッターは画面の上部と下部で固定し、幅いっぱいに使っておりそこに画像やリストを並べています。

他にも後々、レスポンシブにできるようサイズの単位などはem(font-size:62.5%;を指定)や%を使って行っていたのですが、こちらも原因の一部なのでしょうか。こちらもサイズ指定をやり直してみたりと試したのですが駄目でした。

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=960">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

  <header>
    <div class="header-logo">
      <a href="#"><img src="img/rogo.png"></a>
    </div>
    <div class="header-list">
      <ul>
        <li><a href="#">world</a></li>
        <li><a href="#">story</a></li>
        <li><a href="#">charcter</a></li>
        <li><a href="#">movie</a></li>
        <li><a href="#">extra</a></li>
      </ul>
    </div>
  </header>

  <div class="main">

  </div>

  <footer>
     <div class="footer-list">
       <a href="#">お問い合わせ</a>
     </div>
  </footer>

</body>
</html>

###css

//Eric Meyer’s “Reset CSS” 2.0
@import url(eric.css);
html{
  font-size:62.5%;
}

body{
  background-image: url(../img/kuro.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #000;
  color: white;
  font-family: "Makinas-4-Square";
  width: 100%;
  height: 100%;
}

header{
  background-color: rgba(115,115,115,0.3);
  border-bottom: 0.2em solid #00FF40;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6em;
}

.header-logo img{
  width: 12%;
  height: auto;
  float: left;
  margin:0.5em 2em 0 5em;
  cursor: pointer;
}

.header-list {
  position: relative;
  overflow: hidden;
}

.header-list ul{
  position: relative;
  float: left;
}

.header-list li{
  position: relative;
  padding: 1.2em 0.8em 0;
  float: left;
  font-size: 2.5em;
}

.header-list a,.footer-list a{
  color: white;
  text-decoration: none;
}

.main{
  margin: 7em 0;
}

footer{
  background-color: rgba(115,115,115,0.3);
  border-top: 0.2em solid #00FF40;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  display:table-cell;
  vertical-align: middle;
}

.footer-list{
  font-size: 2em;
  text-align: right;
  position: relative;
  padding-right: 0.5em;
  top: 35%;
}

こちらが作ったヘッダー、フッター部分になります。このリストや画像の位置がずれてしまいます。
一応、ゲームサイトっぽいものを作ろうと思っています。

ここで更に別の質問をして申し訳ないのですが、このヘッダーとフッターを別ページそのまま使いたい場合は、htmlだとコピペ、cssはリンクつければよいでしょうか？

ここまで質問して厚かましいとは思いますが、現状ではこちらが自分の最善でしてこれ以上どこを直せばいいのかがわからなく、ここを変えれば簡単になるなどここは無駄など教えてくれれば幸いです。

複数質問してしまい申し訳ありません。
間違って覚えている部分があるかも知れませんが、どうぞよろしくお願い致します。

m.ts10806

2019/01/22 02:20

要件とは関係ありませんが、 >もしかしたらタイトルとは違う内容の質問があるかもしれませんが、そのときはご容赦ください先に質問を書いてからタイトルを考えてはどうでしょうか。「質問するときのヒント」も参考にしてもらいたいのですが、見ている人が最初に目にするのはタイトルなので、質問内容から離れていない、寄ったものが望ましいです。(なので注意書は不要で、注意書するくらいなら精査をしてもらいたいという意味です)

退会済みユーザー

2019/01/22 02:46

ご指摘ありがとうございます。初めての質問で思慮に欠けていました。現状をつらつらと書いていただけで自分でもわかりづらかったです。これからは気をつけていきます。