为了使网站在不同大小或不同分辨率的设备上更好的展示，需要对网页进行响应式设计。下面是适配手机的HTML和CSS代码示例：

HTML代码：

“`html

  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  
  <link rel=”stylesheet” type=”text/css” href=”style.css”>

网页主要内容区域

“`

CSS代码：

“`css
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
nav {
  background-color: #eee;
  text-align: center;
  padding: 10px;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
nav li a:hover {
  background-color: #333;
  color: #fff;
}
main {
  padding: 20px;
}
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}
@media only screen and (max-width: 600px) {
  nav li {
    display: block;
    text-align: center;
  }
}
“`

上述代码中，HTML部分包含了网站的基本结构，包括了头部、导航、主体和页脚。meta标签中的viewport属性设置了网页可见区域的大小，使其能够适配不同大小的设备。

CSS部分定义了整个页面的样式，包括了字体、颜色、背景等。@media查询中的条件(max-width: 600px)指的是设备宽度小于600像素时应用该样式，这里的样式将导航菜单项的布局变为垂直排列以适应小屏幕设备。

需要注意的是，由于不同设备的屏幕大小和分辨率各不相同，所以需要通过不断测试和调整，才能最终确定最适合的样式。