如何使此HTML代碼和CSS在移動應用程序中？

Question

這是我開始的HTML和CSS，抱歉編輯不正確。 我真的很想知道如何制作移動應用。 **當我在網絡中打開時不需要調整大小時，應該添加什么代碼以擁有移動大小的應用程序？ 那我該怎么做才能使其在CSS中響應呢？ 謝謝 **

 @charset "utf-8"; body { width: 960px; } .wrapper{ text-align: center; width: 99%; position: absolute; } .header{ background-color: #ffffff; } .header img { width: 360px; } #nav { background-color: black; width: 100%; font-size: 1em; border-top-width: medium; border-top-style: groove; border-bottom-style: groove; border-bottom-width: medium; } #nav ul { list-style: none; display: block; font-size: larger; } #nav ul li { display: inline-block; } #nav ul { text-align: center; } #nav ul li a { color: #ffffff; text-decoration: none; display: block; padding-top: 10px; padding-right: 15px; padding-left: 15px; padding-bottom: 10px; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; text-transform: uppercase; position: relative; } #nav ul li a:hover { color: #1E5BD4; } #cssmenu ul li a:hover:before { width: 100%; } #nav ul li a.active { text-decoration:underline; color: #EDF0BA; } .how, .about{ font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; margin-left: 10%; margin-right: 10%; background-color: white; text-align: left; color: black; } .sectiontitle{ text-align: center; color: black; text-shadow: 1px 1px 2px #767676; } .footer{ background-color: black; width: 100%; border-style: groove hidden hidden; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding-top: 1%; padding-bottom: 1%; font-size: 1em; color: #FFFFFF; font-variant: small-caps; vertical-align: middle; } .addnotes { float: left; padding-left: 2%; font-color: black; } .listnotes { margin: 0; padding: 0; list-style-type: none; } .listnotes li { background: url('noteicon.png') no-repeat; width: 220px; height: 135px; margin-left: 45%; padding-top: 5%; margin-bottom: 10px; } .noteTitle { float: left; padding-left: 2%; color: black; } .createcontent { float: right; padding-right: 25%; width: 50%; margin: 0 auto; } .definition { padding-top: 10%; } .enumeration { padding-top: 15%; } #titletextbox { background: transparent; border: none; width: 100%; }

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Home</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="wrapper"> <div class="header" id="header"> <div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div> </div> <div class="navigation" id="nav"> <ul> <li><a href="index.html" class='active'><span>Home</span></a></li> <li><a href="notes.html"><span>Notes</span></a></li> <li><a href="exam.html"><span>Exams</span></a></li> </ul> </div> <span class="divider"></span> <div class="homecontent"> <h2 class="sectiontitle">About Test Your Notes!:</h2> <section class="about"> TestYourNotes is a web application that will surely help students boost their scores for their quizzes and exams. TestYourNotes lets users take down notes with two different categories, namely, Definition of Terms and Enumeration. After saving their notes, they can easily review their notes through the view function and also make a mock test/questionnaire as a reviewer using the notes they have created to test their understanding about what they&#146ve taken down through the Generate exam function. </section> <h2 class="sectiontitle">How To Use:</h2> <section class="how"> <h3>To write notes</h3> <ul> <li> Navigate to the NOTES page </li> <li> Click add + a note </li> <li> Edit title of the note on the left side of the page </li> <li> Add an item depending on the category you want to add (Definition of terms and/or Enumeration)</li> <li> If you choose to add an item for Definition of terms category, click add new item to define a term. Simply type the term you want to define and its definition. After adding all the terms you want, click save. </li> <li> If you choose to add an item for Enumeration, click add new Enumeration of items Simply type the classification of the items you will enumerate and type all the items of that classification. To add a new item for that classification just click enter. After adding all the classification you want, click save. </li> </ul> <h3>To view notes</h3> <ul> <li>Click the view notes below the name and date of the notes you have saved.</li> </ul> <h3>To generate an exam for a note</h3> <ul> <li>Click the generate exam below the name and date of the notes you have saved.</li> <li>Upon clicking generate exam button, a dialog box will appear asking what you want to name your generated exam. Type the name you want and then click generate</li> </ul> <h3>To answer an exam</h3> <ul> <li>Click the title of the exam you want to answer.</li> <li>After answering all the items simply click submit exam</li> <li>After clicking submit exam, your score will be shown immediately.</li> </ul> </section> </div> <div class="footer"> <h3 class="copyright">Copyright</h3> </div> </div> </body> </html>

Answer 1

如果要使用移動應用程序，則需要使用編程語言為所選的任何OS /設備創建移動應用程序。 然后，您可以使用Web視圖在應用程序中顯示Web內容。 輕松了解一下移動應用程序開發的ide。

要創建可在移動設備上很好地顯示的自適應網站，請使用媒體查詢。 您可以在整個商店中找到相關信息。 只需搜索css @media查詢即可。

基本媒體查詢的示例如下：

@media screen and (max-width:640px){
/* mobile devices with a max screen width of 640px */
p{color:#f00;}
}

Answer 2

您首先需要在HTML代碼中放入<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 。

您可以在CSS中使用@media使代碼響應。 您也可以選擇使用Bootstrap之類的CSS框架。

如何使此HTML代碼和CSS在移動應用程序中？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-03-26 01:09:46

解決方案2
0 2015-03-26 01:07:21

如何使此HTML代碼和CSS在移動應用程序中？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-03-26 01:09:46

解決方案2 0 2015-03-26 01:07:21

解決方案1
1 已采納 2015-03-26 01:09:46

解決方案2
0 2015-03-26 01:07:21