做web响应式设计（不用媒体查询）实例

nbsp;html&gt;<meta><title>响应式的另一种思考</title><style>/* Basic common settings: */* {  box-sizing: border-box;}html {  line-height: 1.25;  font-family: &#39;Lato&#39;, sans-serif;}.trunc-list-wrapper {  height: 2.25em;  overflow: hidden;  padding-right: 3.5em;}.trunc-list {  list-style: none;  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;  position: relative;}.trunc-list li {  margin: 0;  padding: 0;  flex: 1 0 auto;}.trunc-list a {  display: block;  padding: 0.5em;  text-align: center;  white-space: nowrap;            color: #fff;  background:red;}.trunc-list a:hover,        .trunc-list a:active,        .trunc-list a:focus {   background: red; }.control {  position: absolute;  top: 0;  right: -3.5em;  width: 3.5em;            height: calc((2.25em - 100%) * -1000);  max-height: 2.25em;            overflow: hidden;}.control a {  text-decoration: none;}.control span {  font-size: 0.75em;  font-style: italic;}.control--close {  display: none;}.trunc-list-wrapper:target {  height: auto;}.trunc-list-wrapper:target .control--open {  display: none;}.trunc-list-wrapper:target .control--close {  display: block;}</style><div>  <ul><li>  <a>Home</a></li><li>  <a>Blog</a></li><li>  <a>About Us</a></li><li>  <a>Contact Us</a></li><li>  <a>Help</a></li><li>  <a>Login</a></li><li>  <a>Sign In</a></li><li>  <a><span>more</span></a></li><li>  <a><span>less</span></a></li>  </ul></div><p>改变视口宽度大小来观察效果</p>