1
javascriptを使って画面の解像度に合わせてボディ幅を設定するには？javascriptを使って画面の解像度に合わせてボディの幅を設定する方法は？
私は試しました document.body.style.width = screen.width; 1920pxのような固定幅しか設定できません。
私が意味することは、stackoverflowのようなウェブサイトでは、画面幅は各デバイスで固定されています。私は同じ方法でやりたいと思っています
私はこれにjqueryを使うべきですか？ HTMLは事前に
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Fjalla+One|Gentium+Basic|Nunito|Hammersmith+One" rel="stylesheet">
<script src="https://use.fontawesome.com/ca51704d87.js"></script>
<script src="bg.js"></script>
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onload="bload()">
<div id="header">
<img id="logo_head" src="src/logo_head.png" />
<p id="head">Kkv Martial Arts Academy</p>
<ul id="navhead">
<li id="subnav"><a id="link" href="index.html">HOME</a>
</li>
<li id="subnav">BRANCHES</li>
<li id="subnav"><a id="link" href="about_us.html">ABOUT US</a>
</li>
</ul>
<ul id="s2">
<li id="social"><a id="link" href="http://www.facebook.com"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.plus.google.com"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div id="picb">
<p id="greeting">KKV Martial Arts Academy.</p>
<p id="greeting2">One Place. Many Arts.</p>
<ul id=b>
<a id="link" href="karate.htm
l">
<button class="but1">KARATE</button>
</a>
<a id="link" href="slmb.html">
<button class="but2">SILAMBATAM</button>
</a>
<a id="link" href="kkv.html">
<button class="but3">KAALADI KUTHUVARISAI VARMA</button>
</a>
</ul>
<ul id="bcg">
<li id="dt1" onclick="dx1()">•</li>
<li id="dt1" onclick="dx2()">•</li>
<li id="dt1" onclick="dx3()">•</li>
</ul>
</div>
<div id="home1">
<h1 id="tit2">World Class Training.</h1>
<img id="certimg" src="src/cert.png" />
<p id="hom1inf">Certified by World Karate Federation™ and Japan Karate Federation™ .We provide world class coaching and implement discipline. We aim to increase mental strenght and physical resistance.
<br />
<br />
<button id=exp>Know More></button>
</p>
</div>
<div id="home2">
<h1 id="tit1">From the roots of Japan.</h1>
<img id="shot_kara" src="src/ska-logo.png"></img>
<div id="hom2inf">Learn Shotokan-the most traditional and influential style of Karatte. From <i>katas</i> to <i>kumites</i>, Shotokan made it's influence all over the world making it one of the widely practiced styles.
<br />
<br />
<button id=exp1>Know More></button>
</div>
</div>
<div id="home3">
<h1 id="tit1">Tamil Nadu's Iconic Art</h1>
<img id="sllogo" src="src/sllogo.png" />
<p id="hom2inf">Learn Silambam-one of the iconic art of Tamil Nadu.Derived from the Tamil Word <i>Silam</i> meaning hills and <i>Perambu</i> meaning Bamboo; Silambam imparts flexibility, agility, hand-eye coordination, kinesthetic awareness, balance, strength, speed,
muscular endurance, and cardiovascular stamina.
<br />
<br />
<button id="exp1">Know More></button>
</p>
</div>
<div id="home4">
<h1 id="tit3">The Indigenous Art Of Chola Dynasty</h1>
</div>
<h3 id="footer_title">Navigation</h3>
<ul id="navfoot">
<li id="footli"><a id="link" href="index.html">Home</a>
</li>
<li id="footli"><a id="link" href="karate.html">Karate</a>
</li>
<li id="footli"><a id="link" href="">Kaaladi Kuthuvarisai</a>
</li>
<li id="footli"><a id="link" href="">Branches</a>
</li>
<li id="footli"><a id="link" href="">About Us</a>
</li>
<li id="footli"><a id="link" href="">Contact Us</a>
</li>
</ul>
<h3 id="footer_title1">Contact</h3>
<p id="per2">Phone: <i class="fa fa-mobile" aria-hidden="true"></i>9444638400
<br />Email:
<i class="fa fa-envelope" aria-hidden="true"></i><a target="_top" id="link" href="mailto:as[email protected]?subject=Details%20about%20courses:%20KKV%20Martail%20Arts%20Academy">[email protected]</a>
</p>
<h3 id="footer_title2">Connect:</h3>
<ul id="s3">
<li id="social"><a id="link" href="http://www.facebook.com"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.plus.google.com"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
</li>
<li id="social"><a id="link" href="http://www.instagram.com"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
<p id="per1">Designed by <a id="link" href="https://www.facebook.com/profile.php?id=100010842030822">Ashwin-Crypton.</a>
</p>
</div>
</body>
</html>
のおかげです。
最小限の検証可能なサンプルを提供してください試してみて、コード全体 – Rajesh
これは役立つかもしれません。http://stackoverflow.com/questions/2758651/how-to-change -height-div-on-window-resize – Rajesh
cssメディアクエリの仕組みを研究する – charlietfl